```js
import Dropdown from '@invisionag/iris-react-dropdown';
```

A general single select dropdown component.

It extends [react-select](https://react-select.com) and any of its props can be passed to this component as well. See https://react-select.com/props for a full list.

### Usage:

```
const options = [
  {label: "First Option", value: 1},
  {label: "Second Option", value: 2},
]
<Dropdown placeholder="Select..." options={options} />
```

A custom option renderer can be provided. This works well in conjunction with individualised option arrays:

```
const options = [
  {label: "First Option", value: 1, someValue: "hi!"},
  {label: "Second Option", value: 2, someValue: "ho!"},
]
<Dropdown placeholder="Select..." options={options} optionRenderer={option => <div>{option.someValue}</div>}/>
```

The dropdown can be made searchable by providing the `searchable` prop.
If the dropdown has more then 7 entries it will automatically be searchable.
**Beware:** This will have significant performance issues when a lot of options (100+) are provided!

```
const options = [
  {label: "First Option", value: 1, someValue: "hi!"},
  {label: "Second Option", value: 2, someValue: "ho!"},
]
<Dropdown placeholder="Type to search..." options={options} searchable />
```

The dropdown can be multi selectable by providing the `multi` prop.
Be sure to provide the value as an array. The callback `onChange` returns a an array of values as well.

```
const options = [
  {label: "First Option", value: 1, someValue: "hi!"},
  {label: "Second Option", value: 2, someValue: "ho!"},
]
<Dropdown placeholder="Type to search..." options={options} multi value={[1, 2]} />
```