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