react-picker-mobile

A picker component for mobile device, both 2D and 3D available

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

Related Repositories

m-date-picker

m-date-picker

React Mobile DatePicker(web & react-native) ...

react-mobile-picker

react-mobile-picker

An iOS like select box component for React ...

react-picker-mobile

react-picker-mobile

A picker component for mobile device, both 2D and 3D available ...