Skip to content

Latest commit

 

History

History
92 lines (72 loc) · 3.65 KB

README.md

File metadata and controls

92 lines (72 loc) · 3.65 KB
Raw

React Native Select

npm version

A simple select component for React Native.

react-native-multi-options

TODO

  • Add support for single selection
  • Add support for multiple selections
  • Add support for disabled options
  • Add support for disabled select
  • Add support for placeholder
  • Add search functionality
  • Add support for placeholder color
  • Add tests
  • Add support for custom components
  • Add support for custom styles
  • Add support for custom placeholder
  • Add support for validation
  • GitHub Actions for CI/CD

Installation (Not available yet)

npm install react-native-multi-options

Usage

import React from 'react';
import { View } from 'react-native';
import Select from 'react-native-multi-options';

const options = [
  { label: 'One', value: 'one' },
  { label: 'Two', value: 'two' },
  { label: 'Three', value: 'three' },
];

const App = () => {
  const [value, setValue] = React.useState('one');

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Select
        multiple
        options={options}
        value={value}
        onChange={(option) => setValue(option)}
        disabledOptions={[options[1]]}
        borderColor="red"
      />
    </View>
  );
};

Props

Prop Type Default Description
options Array [] Options to be displayed in the select
value String Value of the selected option
onChange Function Callback function to be called when an option is selected
multiple Boolean false Whether the select should allow multiple selections
disabled Boolean false Whether the select should be disabled
placeholder String Select... Placeholder text to be displayed when no option is selected
placeholderTextColor String #999 Placeholder text color
style Object Style object to be applied to the select
optionStyle Object Style object to be applied to the options
optionTextStyle Object Style object to be applied to the option text
optionContainerStyle Object Style object to be applied to the option container
optionContainerTextStyle Object Style object to be applied to the option container text
optionSelectedStyle Object Style object to be applied to the selected option
optionSelectedTextStyle Object Style object to be applied to the selected option text
borderColor String #999 Border color of the container

Contributing

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

License

MIT

Made with create-react-native-library