https://github.com/jessemao/react-picker-mobile
A picker component for mobile device, both 2D and 3D available
https://github.com/jessemao/react-picker-mobile
3d-picker mobile mobile-picker picker picker-component react react-component react-picker react-picker-mobile
Last synced: about 1 year ago
JSON representation
A picker component for mobile device, both 2D and 3D available
- Host: GitHub
- URL: https://github.com/jessemao/react-picker-mobile
- Owner: jessemao
- License: mit
- Created: 2017-02-23T08:27:32.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-27T06:11:47.000Z (about 9 years ago)
- Last Synced: 2025-02-17T17:46:59.607Z (about 1 year ago)
- Topics: 3d-picker, mobile, mobile-picker, picker, picker-component, react, react-component, react-picker, react-picker-mobile
- Language: JavaScript
- Homepage: https://jessemao.github.io/react-picker-mobile/
- Size: 510 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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**](https://jessemao.github.io/react-picker-mobile/)
```
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( console.log(res) }
/ >,
document.getElementById('root')
);
```
# License
MIT