domaincomponent v1.1.0

Installation

npm install domaincomponent

Usage

DomainTextInput Component

Description

DomainTextInput is a customizable text input component that extends TextInputProps and TextInputIOSProps, providing additional styling and configuration options.

Props

Example Usage

import React from 'react';
import { View } from 'react-native';
import { DomainTextInput } from 'domaincomponent';

const App = () => {
  return (
    <View>
      <DomainTextInput
        name="email"
        label="Email Address"
        helperText="Enter a valid email"
        inputColor="black"
        labelColor="gray"
      />
    </View>
  );
};

export default App;

DomainSelect Component

Description

DomainSelect is a customizable dropdown/select component that allows users to choose from a list of options. It supports labels, placeholders, and optional left/right icons.

Props

Option Object Structure

Each option in the options array follows this structure:

export interface Option {
    id: string;         // Unique identifier for the option
    name: string;       // Display name of the option
    left?: ReactNode;   // (Optional) Left-side icon/component
    right?: ReactNode;  // (Optional) Right-side icon/component
}

Example Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import { DomainSelect } from 'domaincomponent';

const options = [
  { id: '1', name: 'Option 1' },
  { id: '2', name: 'Option 2' },
  { id: '3', name: 'Option 3' },
];

const App = () => {
  const [selectedValue, setSelectedValue] = useState<string | undefined>();

  return (
    <View>
      <DomainSelect
        options={options}
        value={selectedValue}
        onChange={setSelectedValue}
        placeholder="Select an option"
        label="Dropdown"
        resetButton={true}
      />
    </View>
  );
};

export default App;

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library