Package Exports

react-16-dropdown

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-16-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A zero-dependency, lightweight and fully customizable dropdown (not select) for React. You can find examples here

Installation

npm install --save react-16-dropdown

Basic usage

import Dropdown from 'react-16-dropdown';

const options = [{
  label: 'Prestige 🎩',
  value: 'prestige',
}, {
  label: 'Inception 😴',
  value: 'inception',
}];

<Dropdown
  align='left'
  className='custom-classname'
  closeOnEscape={true}
  options={options}
  triggerLabel='Movies 🍿'
  onClick={val => console.log(val)}
/>

Supported props

You can pass the following props to the Dropdown component -

Name	Default	Allowed values	Description
align	left	left, right	Decides the alignment of the menu w.r.t trigger
className	''	`String`	Adds the given class to the wrapper element
portalClassName	''	`String`	Adds the given class to portal component
options*	`undefined`	`Array`	An array of objects
open	`undefined`	`Boolean`	Prop to control open/closed state of the menu
triggerLabel	Open menu	`String`	Text for the default trigger button
onClick*	`undefined`	`Function`	Handler for option click event
disabled	`false`	`Boolean`	Disable the trigger
closeOnEscape	`true`	`Boolean`	Should the dropdown menu close on pressing Escape
closeOnClickOutside	`true`	`Boolean`	Should the dropdown menu close on clicking outside the menu
closeOnOptionClick	`true`	`Boolean`	Should the dropdown close when option is clicked
onOpen	`undefined`	`Function`	Function to be called when menu opens
onClose	`undefined`	`Function`	Function to be called when menu closes
onTriggerClick	`undefined`	`Function`	Function to be called when the trigger element is clicked
menuPortalTarget	`body`	`String`	Selector for the portal to be attached as a child to
menuRenderer	`MenuRenderer`⁽¹⁾	`ReactElement`	Component to render the menu
triggerRenderer	`TriggerRenderer`⁽¹⁾	`ReactElement`	Component to render the trigger
optionRenderer	`OptionRenderer`⁽¹⁾	`ReactElement`	Component to render option
menuComponent	`Menu`⁽¹⁾ ⁽²⁾	`ReactElement`	Component to replace the default menu
optionComponent	`Option`⁽¹⁾ ⁽²⁾	`ReactElement`	Component to replace the default option
triggerComponent	`Trigger`⁽¹⁾ ⁽²⁾	`ReactElement`	Component to replace the default trigger

The options prop is an array of objects. Each object can have the following keys -

Key	Value	Description
value*	`String`	Unique identifier for each option
label*	<`String`	`ReactElement`>
className	`String`	Custom class name for the option

⁽¹⁾ Default internal component

⁽²⁾ If you replace the component (instead of using renderers), you will have to pass down all the handlers, refs and other props down to your components.

* Required props

Customization

You can customize any part of the dropdown to suit your needs. In most cases, modifying existing classes/adding your own classes should do the trick. For advanced use cases, you can use custom render components. If you want to take over individual components of the dropdown, you can replace the menu, option or trigger default components.

Using renderers -

<Dropdown
  options={colorOptions}
  triggerRenderer={() => <button className='btn btn-dark ml-2'>Option renderer</button>}
  optionRenderer={props => <div className={`option option--${props.value}`}>{props.label}</div>}
  onClick={e => console.log(e)}
/>

Using components -

function CustomButtonComponent(props) {
  return (
    <a
      className='btn btn-outline-info'
      ref={props.triggerRef}
      onClick={props.onClick}
      onKeyDown={props.onKeyDown}
    >
      Custom link component
    </a>
  );
}

<Dropdown
  options={options}
  triggerComponent={CustomButtonComponent}
  onClick={e => console.log(e)}
/>

Controlled Component

You can also use the dropdown as a controlled component if you pass the open prop.

<Dropdown
  open={true}
  options={options}
  onTriggerClick={() => { /* do something */ }}
  onClick={e => console.log(e)}
/>