Awesome Open Source
Awesome Open Source

React Mobile Picker

Travis npm GitHub license

React Mobile Picker is a super simple component with no restriction, which means you can use it in any way you want.




Scan this Qr in you mobile.

Or visit (in mobile or mobile simulator):


npm install react-mobile-picker --save



import Picker from 'react-mobile-picker';


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


Property name Type Default Description
optionGroups Object N/A Key-value pairs as {name1: options1, name2: options2}. options is an array of all options for this name.
valueGroups Object N/A Selected value pairs as {name1: value1, name2: value2}.
onChange(name, value) Function N/A Callback called when user pick a new value.
onClick(name, value) Function N/A Callback called when user click on selected value.
itemHeight Number 36 Height of each item (that is each option). In px.
height Number 216 Height of the picker. In px.

Getting Started

By design, React Mobile Picker is a Controlled Component, which means the selected value of the rendered element will always reflect the valueGroups. Every time you want to change the selected item, just modify valueGroups values.

Here is an example of how to integrate React Mobile Picker:

import React, {Component} from 'react';
import Picker from 'react-mobile-picker';

class App extends Component {
  constructor(props) {
    this.state = {
      valueGroups: {
        title: 'Mr.',
        firstName: 'Micheal',
        secondName: 'Jordan'
      optionGroups: {
        title: ['Mr.', 'Mrs.', 'Ms.', 'Dr.'],
        firstName: ['John', 'Micheal', 'Elizabeth'],
        secondName: ['Lennon', 'Jackson', 'Jordan', 'Legend', 'Taylor']

  // Update the value in response to user picking event
  handleChange = (name, value) => {
    this.setState(({valueGroups}) => ({
      valueGroups: {
        [name]: value

  render() {
    const {optionGroups, valueGroups} = this.state;

    return (
        onChange={this.handleChange} />

More Examples

git clone this repo
npm install
npm start
point your browser to http://localhost:8080



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,555,917
Reactjs (72,970
Mobile (3,219
React Components (2,366
Picker (586
Related Projects