adcentury / React Mobile Picker
Licence: mit
An iOS like select box component for React
Stars: ✭ 180
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Mobile Picker
react-native-value-picker
Cross-Platform iOS(ish) style picker for react native.
Stars: ✭ 18 (-90%)
Mutual labels: react-component, picker
Flutter wechat assets picker
An assets picker in WeChat style, support multi assets picking.
Stars: ✭ 398 (+121.11%)
Mutual labels: mobile, picker
react-daterange-picker
A react date range picker to using @material-ui. Live Demo: https://flippingbitss.github.io/react-daterange-picker/
Stars: ✭ 85 (-52.78%)
Mutual labels: react-component, picker
Bottomsheet
BottomSheet dialog library for Android
Stars: ✭ 219 (+21.67%)
Mutual labels: mobile, picker
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-43.89%)
Mutual labels: mobile, picker
Recipes App React Native
Recipes App in React Native
Stars: ✭ 386 (+114.44%)
Mutual labels: mobile, react-component
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+990%)
Mutual labels: mobile, react-component
React Easy Swipe
Easy handler for common swipe operations
Stars: ✭ 85 (-52.78%)
Mutual labels: mobile, react-component
React Colorful
🎨 A tiny (2,5 KB) color picker component for React and Preact apps
Stars: ✭ 951 (+428.33%)
Mutual labels: react-component, picker
React Items Carousel
Items Carousel Built with react-motion and styled-components
Stars: ✭ 150 (-16.67%)
Mutual labels: mobile, react-component
React Native Paper Dates
Smooth and fast cross platform Material Design date and time picker for React Native Paper
Stars: ✭ 173 (-3.89%)
Mutual labels: picker
React Credit Cards
Beautiful credit cards for your payment forms
Stars: ✭ 2,239 (+1143.89%)
Mutual labels: react-component
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+1036.67%)
Mutual labels: mobile
Animate Css Styled Components
simple port of animate css for styled-components
Stars: ✭ 173 (-3.89%)
Mutual labels: react-component
React Native Google Place Picker
React Native Wrapper of Google Place Picker for iOS + Android.
Stars: ✭ 180 (+0%)
Mutual labels: picker
Android Advancedwebview
Enhanced WebView component for Android that works as intended out of the box
Stars: ✭ 2,186 (+1114.44%)
Mutual labels: mobile
Magicalexoplayer
The Easiest Way To Play/Stream Video And Audio Using Google ExoPlayer In Your Android Application
Stars: ✭ 171 (-5%)
Mutual labels: mobile
React Mobile Picker
React Mobile Picker is a super simple component with no restriction, which means you can use it in any way you want.
Preview
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 --save
Usage
ES6
import Picker from 'react-mobile-picker';
CommonJS
var Picker = require('react-mobile-picker');
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. |
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) {
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].