React Picker Mobile

React Picker Mobile is a component very easy to use with no extra effort. It can be used in any project with great performance!

How to install

npm install react-picker-mb --save

How to use

ES6

import Picker from 'react-picker-mb';

CommonJS

var Picker = require('react-picker-mb');

Properties

Name	Type	Default	Description
itemHeight	Number	36	Height of each row in picker (px).
visibleItemCount	Number	5	Count of visible items in picker.
showToolbar	Boolean	false	If true, a customized toolbar would appear in picker.
rotateEffect	Boolean	false	If true, picker will be in 3D mode; otherwise, picker will be in 2D.
pickerSlots	Array	[]	Array of pickers is used in total. Each item of this array will implement an individual picker(pickerSlot).
onChange	Function	() => {}	This accepts a callback function for picker to output result. Picker result will be in format of array, for example, ['2015', '01', '02'].

PickerSlot

Name	Type	Default	Description
options	Array	[]	Array of each picker's options. item of array can be one of type: String, Number, Boolean, Object. If it's an object, property dataKey then is required so that picker knows what values to use.
dataKey	String	""	Optional property, is required when options array includes objects. Use this key to get values of option object.
defaultIndex	Number	0	Set default value of picker by index.
divider	Boolean	false	If true, a divider column is created.
dividerContent	String	"-"	If divider is true, dividerContent will be used for displaying the divider column. It can be rich HTML string.
className	String	""	Customized class for the picker column.
flex	Number	0	Optional property. Picker columns apply flex layout. Bigger value will result in a larger column.
textAlign	String	'center'	Can be 'left/center/right'. Text alignment of the picker column.

Getting Started

To play it yourself, you can clone this repo and run the example in your local space.

Or you can play with the picker Online here

git clone https://github.com/jessemao/react-picker-mobile.git
cd react-picker-mobile && cd example
npm install
npm start

The code example as below:

import React from 'react';
import ReactDOM from 'react-dom';
import Picker from 'react-picker-mb';
import './index.css';

ReactDOM.render(<Picker
    pickerSlots={[{
      flex: 1,
      options: [{
        id: '0'
      }, {
        id: '1'
      }, {
        id: '2'
      }, {
        id: '3'
      }, {
        id: '4'
      }],
      defaultIndex: 2,
      dataKey: 'id',
      className: 'slot1',
      textAlign: 'right',
    }, {
      divider: true,
      dividerContent: '-',
      className: 'slot2'
    }, {
      flex: 1,
      options: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
      className: 'slot3',
      textAlign: 'left'
    }]
  }
  visibleItemCount={ 5 }
  onChange={ (res) => console.log(res) }
/ >,
document.getElementById('root')
);

License

MIT