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]} />