Disclaimer

This is a fork of react-dropdown-multiselect by ahstro, so huge thanks to him. I just needed a simple multiselect for a project and forked.

react-html-multiselect

Why

• The default html multi-select seems like a different element to the single-select
• Most custom select does not work out of box with normal html form, this does.
• The default HTML select element is hard to style
• if you want more advanced select, check react-select

Installation

// With npm
$ npm install react-html-multiselect  --save

// With yarn
$ yarn add react-html-multiselect

Usage

'use strict';

import React from 'react';
import Dropdown from '../';

class App extends React.Component {

  constructor() {
    this.state = {
      selected: { value: 'two', label: 'Two'}
    }
  }

  _onSelect(option) {
    console.log('You selected ', option.label)
    this.setState({selected: option})
  }

  render() {

    const options = [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two', disabled: true },
      {
        type: 'group', name: 'group1', items: [
          { value: 'three', label: 'Three' },
          { value: 'four', label: 'Four' }
        ]
      },
      {
        type: 'group', name: 'group2', items: [
          { value: 'five', label: 'Five' },
          { value: 'six', label: 'Six' }
        ]
      }
    ]

    let defaultOption = this.state.selected

    return (
      <Dropdown options={options} onChange={this._onSelect.bind(this)} value={defaultOption} placeholder="Select an option" />
    )
  }

}
React.render(<App />, document.body)

Run example

$ cd example && npm install && npm run watch

Customizing the dropdown

name

The name prop is passed down to the hidden select

<Dropdown name='element-name' />;

className

The className prop is passed down to the wrapper div, which also has the Dropdown-root class.

<Dropdown className='myClassName' />;

controlClassName

The controlClassName prop is passed down to the control div, which also has the Dropdown-control class.

<Dropdown controlClassName='myControlClassName' />;

menuClassName

The menuClassName prop is passed down to the menu div (the one that opens and closes and holds the options), which also has the Dropdown-menu class.

<Dropdown menuClassName='myMenuClassName' />;

noPreview

The noPreview prop is meant to disable the display of selected values, and instead display the count of selected value.

<Dropdown noPreview='Y' />;

maxSelectLength

The maxSelectLength prop is meant to limit the number of possible option(s) that can be selected at any time. Defaults to Infinity.

<Dropdown maxSelectLength={2} />;

withSearch

The withSearch prop is a toggle to show the searchbox. Defaults to True.

<Dropdown withSearch={'Y'} />;

License

MIT | Build for CSViz project @Wiredcraft