@invisionag/iris-react-dropdown

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

A general single select dropdown component.

It extends react-select 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]} />