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 = [
  { value: 'one', label: 'One', view: <span>One</span> },
  { value: 'two', label: 'Two', className: 'myOptionClassName' },
  {
   type: 'group', name: 'group1', items: [
     { value: 'three', label: 'Three', className: 'myOptionClassName' },
     { value: 'four', label: 'Four' }
   ]
  },
  {
   type: 'group', 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)

Disabled

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

---

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.

License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.