README

React-Picker

Picker Component offers a popup options list with responsive layouts.

Changelogs

v1.2.16

upgrade for security alert

v1.2.13

removed webpack-dev-server dependency

v1.2.11

Update react-tapper to 0.1.15; update dependencies

v1.2.10

Update demo link in readme

v1.2.9

Upgrade babel-loader & update readme

v1.2.8

Added .npmignore

v1.2.7

Update for react v15.5.x

Installation

yarn add react-picker

npm install react-picker --save

Snapshots

PC WEB

Mobile WEB

Demo

Demo file in repository: ./examples/demo.html

Example

./examples/demo.jsx

Import component into your react project

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.

Using CSS/SCSS

CSS: import css/picker.css

SCSS: 1) import bourbon library (http://bourbon.io/), 2) import scss/picker.scss

Properites

@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

@theme: theme setting of month-picker; 2 options (light/dark); default theme is light

License

MIT

Usage no npm install needed!