dropdown-select

> A group of dropdown select controls for React JS.

$3

Live Demo:

$3

* Multi Select
* Async Select
* Auto Complete
* Minimal Interface
* Can Control using Keyboard
* Works with redux-form

$3

Add package using Yarn or Npm.

``sh
yarn add dropdown-select
`

`sh
npm install dropdown-select
`

$3

Import dropdown select controls and its styles into your component.

`js
import { Select, AsyncSelect, MultiSelect } from 'dropdown-select';
import 'dropdown-select/dist/css/dropdown-select.css';
`

Alternatively, you can import the styles from .scss files as follows:

`scss
@import '~dropdown-select/dist/css/dropdown-select.css';
`

Simple Select: (with array of string options)

`jsx
options={['option1', 'option2', ...]}
/>
`

Simple Select: (with array of object options)

`jsx
options = [
{
label: 'label1',
value: 'value1'
},
{
label: 'label2',
value: 'value2'
},
]

`

Async Select:

`jsx

`

Multi Select: (Checkboxed Options)

It accepts and returns array of options

`jsx

`

---

Using simple select as custom component in redux-form

`jsx
renderSelectField({ input, options, meta: { touched, error } }) {
return (



{...input}
options={options}
labelKey="name"
valueKey="id"
/>
{touched && error && {error}}


);
}

render() {
const { handleSubmit } = this.props
const options = []

return (

name="fieldName"
options={options}
component={this.renderSelectField}
/>
Submit

);
}

`

---

$3

| 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 |

$3

| 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 |

---

$3

* Use

if options length < 200

* Use ` if options length > 200

$3

For advanced use cases, please refer
react-select