@invisionag/iris-react-dropdown NPM | npm.io

6.6.15 • Published 4 years ago

Install

Weekly downloads

6

License

MIT

Repository

Last release

4 years ago

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

@invisionag/injixo-tokens @invisionag/iris-react-icon @invisionag/iris-react-input @invisionag/iris-settings @invisionag/iris-tools classnames react-select

@infinitebrahmanuniverse/nolb-_inv @everything-registry/sub-chunk-468 @zalastax/nolb-_inv

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6.4.17-alpha.13

5 years ago

6.4.17-alpha.11

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6.4.3-alpha.4542

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago