0.1.3 • Published 7 years ago
react-picker-mb v0.1.3
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 --saveHow 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 startThe 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