react-simple-picker

Scrollable number picker

See Demo Page

Installation

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

Usage

<Picker maxCount={59} />

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

<Picker
  height={300}
  iconAdd={<div>+</div>}
  iconMinus={<div>-</div>}
  initCount={2019}
  minCount={1970}
  maxCount={2999}
  preloadCount={8}
  renderMask={Mask => <Mask className={styles.dateMask} />}
  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) => <Mask /> | | provide Mask Component for customizing |

Mask

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