![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@tuily/react-mobile-picker-scroll
Advanced tools
An iOS like select box component for React, with scroll wheel and keyboard support
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.
Scan this Qr in you mobile.
Or visit (in mobile or mobile simulator): http://adcentury.github.io/react-mobile-picker
npm install react-mobile-picker-scroll --save
import Picker from 'react-mobile-picker-scroll';
var Picker = require('react-mobile-picker-scroll');
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 . |
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} />
);
}
}
git clone this repo
npm install
npm start
point your browser to http://localhost:8080
MIT.
FAQs
An iOS like select box component for React, with scroll wheel and keyboard support
We found that @tuily/react-mobile-picker-scroll demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.