🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The React Picker Component offers a popup options list with responsive layouts.

Others React

Documentation

React-Picker

Picker Component offers a popup options list with responsive layouts.

Changelogs

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 

or

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


You May Also Like