Package Exports
- react-dropdown
- react-dropdown/style.css
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-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 --saveUsage
'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' },
{
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} />
)
}
}
React.render(<App />, document.body)
Run example
$ cd example && npm install && npm run watchLicense
MIT | Build for CSViz project @Wiredcraft