dropdown-select

A group of dropdown select controls for React JS.

Demo

Live Demo:

Features

• Multi Select
• Async Select
• Auto Complete
• Minimal Interface
• Can Control using Keyboard
• Works with redux-form

Installation

Add package using Yarn or Npm.

yarn add dropdown-select

npm install dropdown-select

Usage

Import dropdown select controls and its styles into your component.

import { Select, AsyncSelect, MultiSelect } from 'dropdown-select';
import 'dropdown-select/dist/css/dropdown-select.css';

Alternatively, you can import the styles from .scss files as follows:

@import '~dropdown-select/dist/css/dropdown-select.css';

Simple Select: (with array of string options)

<Select
  options={['option1', 'option2', ...]}
  />

Simple Select: (with array of object options)

options = [
  {
    label: 'label1',
    value: 'value1'
  },
  {
    label: 'label2',
    value: 'value2'
  },
]
<Select options={options} labelKey="label" valueKey="value" />

Async Select:

<AsyncSelect fetchOptions={this.fetchOptions} />

Multi Select: (Checkboxed Options)

It accepts and returns array of options

<MultiSelect options={[]} />

---

Using simple select as custom component in redux-form

renderSelectField({ input, options, meta: { touched, error } }) {
  return (
    <div>
      <SimpleSelect
        {...input}
        options={options}
        labelKey="name"
        valueKey="id"
        />
      {touched && error && <span className="error">{error}</span>}
    </div>
  );
}

render() {
  const { handleSubmit } = this.props
  const options = []

  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="fieldName"
        options={options}
        component={this.renderSelectField}
        />
      <button type="submit">Submit</button>
    </form>
  );
}

---

Functional Properties:

Property	Type	Default	Description
autoComplete	boolean	true	Enables / Disables auto complete options while typing
disabled	boolean	false	To disable the select or not
fetchOptions	function	undefined	Async Select property, the control calls this function when input value changed
labelKey	string	undefined	Used to identify the option label
options	array	[]	Array of strings (OR) Array of objects
onChange	function	undefined	Control onChange event handler, this function will be called with new option as parameter
placeholder	string / array	string	Input placeholder, for Multi Select you can pass an array with singular and plural name for items. Eg: ['Person', 'People']
tabIndex	string	undefined	tabIndex of the control
value	string / object / array	'' or []	For Multi select, the default value is [] and for Simple and Async select, the default value is empty string
valueKey	string	undefined	Used to identify the option value

Style Properties:

Property	Type	Default	Description
className	String	undefined	Overrides outer control styles
inputClassName	String	undefined	Overrides control input styles
optionsClassName	String	undefined	Overrides control options container styles
optionClassName	String	undefined	Overrides control option styles

---

Notes on Performance:

• Use <Select /> if options length < 200

• Use <AsyncSelect /> if options length > 200

Further Reading

For advanced use cases, please refer react-select