Picker Component offers a popup options list with responsive layouts.
npm install react-picker --save
Demo file in repository: ./examples/demo.html
./examples/demo.jsx
import Picker from 'react-picker'
<ul>
<li>
<label>Choice X</label>
<div className="edit">
<Picker
ref="fruitSelection"
value={fruit}
options={['Mango', 'Orange', 'Avocado', 'Pineapple', 'Jack Fruit', 'Durian', 'Apricot', 'Carambola', 'Dateplum Persimmon', 'Megranate']}
onChange={this._handleFruitChange}
>
<OptionBox value={fruit} onClick={this._handleClickFruit} />
</Picker>
</div>
</li>
<li>
<label>Choice Y</label>
<div className="edit">
<Picker
ref="carSelection"
value={[brand, serial]}
options={[this.state.brands, this.state.series]}
onChange={this._handleCarChange}
width="600px"
>
<OptionBox value={this.getCarText(brand, serial)} onClick={this._handleClickCar} />
</Picker>
</div>
</li>
</ul>
OptionBox is a customized component defined for the demo.
CSS: import css/picker.css
SCSS: 1) import bourbon library (http://bourbon.io/), 2) import scss/picker.scss
- @value: Default selected option value
- @options: Options of the picker
- @onChange: callback on changing selected option
- @onShow: callback on calling show method
- @onDismiss: callback on calling dismiss method
- @onClickAway: callback on clicking area outside the picker panel
- @width: width of the picker panel