Giter Club home page Giter Club logo

react-picker's Introduction

React-Picker

Picker Component offers a popup options list with responsive layouts.

Changelogs

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

Online 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

react-picker's People

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.