dropdown

Simple Dropdown component for React

Apr 02, 2021
Simple Dropdown component for React

react-dropdown-now

Simple Dropdown component for React.

View Demo View Github

requires React >= 16.8

import { Dropdown, Selection } from 'react-dropdown-now'; import 'react-dropdown-now/style.css'; // normal usage <Dropdown placeholder="Select an option" className="my-className" options={['one', 'two', 'three']} value="one" onChange={(value) => console.log('change!', value)} onSelect={(value) => console.log('selected!', value)} // always fires once a selection happens even if there is no change 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

ClassnameTargets
rdnmain wrapper div
rdn-controldropdown control
rdn-control-arrowdropdown arrow indicator
rdn-control-placeholderplaceholder / selected item in dropdown control
rdn-dropcontainer for dropdown options

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" />} />;

GitHub

https://github.com/iambumblehead/react-dropdown-now

Recommended