react-dropdown

react-dropdown

Simple Dropdown component for React, inspired by react-select

Why

• The default HTML select element is hard to style
• And sometime we also want grouped menus
• if you want more advanced select, check react-select

Installation

$ npm install react-dropdown  --save

Usage

var Dropdown = require('react-dropdown ')

var App = React.createClass({
  _onSelect: function(option) {
    console.log('You selected ', option.label)
  },

  render: function() {

    var options = [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      {
        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' }
        ]
      }
    ]

    var defaultOption = { value: 'two', label: 'Two'}

    return (
      <div>
        <Dropdown options={options} onChange={this._onSelect} value={defaultOption} />
      </div>
    )
  }
})

Development

Build: make sure you have react-tools installed golbally to use the jsx in your terminal.

$ npm run build

Run example

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

License

MIT | Build for CSViz project @Wiredcraft