https://github.com/vipcxj/react-mobile-style-picker
A react mobile style picker component optimized for web used
https://github.com/vipcxj/react-mobile-style-picker
Last synced: 6 months ago
JSON representation
A react mobile style picker component optimized for web used
- Host: GitHub
- URL: https://github.com/vipcxj/react-mobile-style-picker
- Owner: vipcxj
- License: mit
- Created: 2019-08-11T17:22:08.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:53:54.000Z (almost 3 years ago)
- Last Synced: 2025-03-11T13:41:42.156Z (7 months ago)
- Language: TypeScript
- Size: 3.14 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-mobile-style-picker ·  [](https://www.npmjs.com/package/react-mobile-style-picker)
The most powerful mobile-style picker component for [React](https://reactjs.org/) used in web at this moment.
Based on this [project](https://github.com/react-component/m-picker), but with a lot of improvements and new features.
## improvement
- `drag to select` works properly out of the component.
## new features
- support `horizontal` mode.
- support style a height or width to the component, and the height and width of the picker item will be automatically computed.
- support `click to select`, and not conflict with `drag to select`.
- support `scroll to select`.
- support `onClick` and other callback of the picker item.
- support custom indicator.
- support custom picker item size.
- support custom picker item margin.
- support custom max visible picker item.
- support custom rotate effect.
- support custom mask alpha.
- support loading state.
## Installation
Using [npm](https://www.npmjs.com/):
$ npm install --save react-mobile-style-picker
## Demo
[storybook](https://vipcxj.github.io/react-mobile-style-picker/)
## Example
```javascript
import React from 'react';
import { Picker } from 'react-mobile-style-picker';
import 'react-mobile-style-picker/dist/index.css' // or index.less
const App = (
zero
one
two
three
four
five
);
const root = document.getElementById('root');
ReactDOM.render(, root);
```
## Props
WIP