dropdown-select
A group of dropdown select controls for React JS.
Demo
Features
- Multi Select
- Async Select
- Auto Complete
- Minimal Interface
- Can Control using Keyboard
- Works with redux-form
Installation
Add package using Yarn or Npm.
yarn add dropdown-select
npm install dropdown-select
Usage
Import dropdown select controls and its styles into your component.
;;
Alternatively, you can import the styles from .scss
files as follows:
;
Simple Select: (with array of string options)
<Select = />
Simple Select: (with array of object options)
options = label: 'label1' value: 'value1' label: 'label2' value: 'value2' <Select = ="label" ="value" />
Async Select:
<AsyncSelect = />
Multi Select: (Checkboxed Options)
It accepts and returns array of options
<MultiSelect = />
Using simple select as custom component in redux-form
{ return <div> <SimpleSelect = ="name" ="id" /> touched && error && <span ="error">error</span> </div> ;} { const handleSubmit = thisprops const options = return <form => <Field ="fieldName" = = /> <button ="submit">Submit</button> </form> ;}
Functional Properties:
Property | Type | Default | Description |
---|---|---|---|
autoComplete | boolean | true | Enables / Disables auto complete options while typing |
disabled | boolean | false | To disable the select or not |
fetchOptions | function | undefined | Async Select property, the control calls this function when input value changed |
labelKey | string | undefined | Used to identify the option label |
options | array | [] | Array of strings (OR) Array of objects |
onChange | function | undefined | Control onChange event handler, this function will be called with new option as parameter |
placeholder | string / array | string | Input placeholder, for Multi Select you can pass an array with singular and plural name for items. Eg: ['Person', 'People'] |
tabIndex | string | undefined | tabIndex of the control |
value | string / object / array | '' or [] | For Multi select, the default value is [] and for Simple and Async select, the default value is empty string |
valueKey | string | undefined | Used to identify the option value |
Style Properties:
Property | Type | Default | Description |
---|---|---|---|
className | String | undefined | Overrides outer control styles |
inputClassName | String | undefined | Overrides control input styles |
optionsClassName | String | undefined | Overrides control options container styles |
optionClassName | String | undefined | Overrides control option styles |
Notes on Performance:
-
Use
<Select />
if options length < 200 -
Use
<AsyncSelect />
if options length > 200
Further Reading
For advanced use cases, please refer react-select