react-simple-picker

Scrollable number picker

See Demo Page

Installation

npm install react-simple-picker or yarn add react-simple-picker

Usage

``jsx

`

or You can set maximal and minimal number with custom mask and onChange event function

`jsx
height={300}
iconAdd={

}
iconMinus={

-

}
initCount={2019}
minCount={1970}
maxCount={2999}
preloadCount={8}
renderMask={Mask => }
onChange={number => console.log('year', number)}
/>
``

Picker

| Properties | Type | Default | Required? | Description |
| :----------------: | :---------: | :-------------------: | :-------: | :------------------------------------: |
| className | String | | | layout's className |
| style | StyleSheet | | | layout's style |
| scrollerBackground | Hex Color | | | |
| minCount | Number | 0 | | |
| initCount | Number | minCount | | |
| maxCount | Number | | ✓ | |
| preloadCount | Number | 2 | | |
| onChange | Function | | | firing while picker's value changing |
| height | Number | | | picker's height |
| iconAdd | HTMLElement | | | icon for adding button |
| iconMinus | HTMLElement | | | icon for subtracting button |
| renderMask | Function | (Mask) => \ | | provide Mask Component for customizing |

Mask

| Properties | Type | Default | Required? | Description |
| :--------: | :--------: | :-----: | :-------: | :----------------: |
| className | String | | | layout's className |
| style | StyleSheet | | | layout's style |