React Picker Mobile is a component very easy to use with no extra effort. It can be used in any project with great performance!
npm install react-picker-mb --save
import Picker from 'react-picker-mb';
var Picker = require('react-picker-mb');
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']. |
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. |
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')
);
MIT