Skip to content

dsmalicsi/react-mobile-picker-scroll

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Mobile Picker

This package is a fork of the original React Mobile Picker made by @adcentury, modified to provide scroll wheel and keyboard up/down event support for desktop browsers.

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

screen-capture

Preview

qr

Scan this Qr in you mobile.

Or visit (in mobile or mobile simulator): http://adcentury.github.io/react-mobile-picker

Install

npm install react-mobile-picker-scroll --save

Usage

ES6

import Picker from 'react-mobile-picker-scroll';

CommonJS

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

Props

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.
itemHeight Number 36 Height of each item (that is each option). In px.
height Number 216 Height of the picker. In px.
textColor String N/A Text color of the picker item
textFontFamily String N/A Font family of the picker item.
textSize Number N/A Text size of the picker item. 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-scroll';

class App extends Component {
  constructor(props) {
    super(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: {
        ...valueGroups,
        [name]: value
      }
    }));
  };

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

    return (
      <Picker
        optionGroups={optionGroups}
        valueGroups={valueGroups}
        onChange={this.handleChange} />
    );
  }
}

More Examples

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

License

MIT.

About

An iOS like select box component for React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 85.8%
  • Less 14.2%