react-dropdown-now

react-dropdown-now

The demo page is here. react-dropdown-now is a fork of react-dropdown.

requires React >= 16.8

import Dropdown, { Selection } from 'react-dropdown-now';
import 'react-dropdown-now/style.css';

// normal usage
<Dropdown
  placeholder="Select an option"
  options={['one', 'two', 'three']}
  value="one"
  onChange={(value) => console.log('change!', value)}
  onClose={(closedBySelection) => console.log('closedBySelection?:', closedBySelection)}
  onOpen={() => console.log('open!')}
/>;

// use the Selection component with other components like popovers etc.
<Selection
  options={['one', 'two', 'three']}
  value="one"
  onChange={(value) => console.log('change!', value)}
/>;

Flat Array options

const options = [
  'one', 'two', 'three'
];

Object Array options

const options = [
  { id: 'one', value: 'one', label: 'One', view: <span>One</span> },
  { value: 'two', label: 'Two', className: 'myOptionClassName' },
  {
   name: 'group1',
   items: [
     { value: 'three', label: 'Three', className: 'myOptionClassName' },
     { value: 'four', label: 'Four' }
   ]
  },
  {
    name: 'group2',
    items: [
     { value: 'five', label: 'Five' },
     { value: 'six', label: 'Six' }
   ]
  }
];

When using Object options you can add to each option:

• a className string to further customize the dropdown, e.g. adding icons to options
• a view node to render an isolated view in the dropdown options list which is different from what could be seen in the dropdown control (selected value)
• an id string can be used to give an id to each option. Must be unique; even when mixing grouped options with single options. Useful for when option.value is not a string or number. Can be used with a custom matcher to determine the selected option.

Disabled

<Dropdown disabled option={options} value={defaultOption} />

matcher

The default matcher will use the value prop to match against values within the options array.

custom matcher example:

const value = 'custom-id';
const options = [{ id: 'custom-id', value: 1, label: 'awesome' }];

<Dropdown
  option={options}
  value={value}
  matcher={(item, val) => {
    // item => { id, option: {id, value, label} }
    return item.id === val;
  }}
/>;

Customizing

Styling with classnames

Classname	Targets
Dropdown-root prop: className	main wrapper div
Dropdown-control prop: controlClassName	the dropdown control
Dropdown-placeholder prop: placeholderClassName	styles the placeholder / selected item in dropdown control
Dropdown-menu prop: menuClassName	container for the dropdown options
Dropdown-arrow prop: arrowClassName	dropdown arrow indicator

Using custom arrows

arrowClosed, arrowOpen

The arrowClosed & arrowOpen props enable passing in custom elements for the open/closed state arrows.

<Dropdown
  arrowClosed={<span className="arrow-closed" />}
  arrowOpen={<span className="arrow-open" />} />;

More examples in the docs folder.

Migration

v2 => v3

• onChange always returns an object with aleast {value, label}
• option.type is no longer needed to determine if the option is a group. Once the option has an items array then it is assumed to be a group.

License

MIT