1.1.4 • Published 3 years ago
react-simple-picker v1.1.4
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 |