A simple React component which brings iOS-like wheelpicker to the web!
Find the Demo here
npm install react-wheelpicker
The component imported is called WheelPicker.
To use the component, simply import the package on the top of the file and use
import WheelPicker from 'react-wheelpicker'
import WheelPicker from 'react-wheelpicker'
class App extends React.Component {
constructor(){
super()
this.state = {
pickerOpen: false,
data: ["Intro to Data Science", "Big Data", "Design and Analysis of Algorithms", "Operating Systems", "Cloud Computing", "Principles of Database Systems"],
defaultSelection: 3,
selection: "Big Data",
}
}
render(){
return (
<React.Fragment>
<div className="selected" onClick={() => this.setState({ pickerOpen: !this.state.pickerOpen})}> {this.state.selection}
</div>
{this.state.pickerOpen &&
<div className="demo-container">
<WheelPicker
animation="wheel"
data={this.state.data}
height={40}
parentHeight={250}
fontSize={13}
defaultSelection={this.state.defaultSelection}
updateSelection={selectedIndex => this.setState({ selection: this.state.data[selectedIndex], defaultSelection: selectedIndex })}
scrollerId="scroll-select-subject"
/>
</div>
}
</React.Fragment>
)
}
}
scrollerId (String) - COMPULSORY PROP
scrollerId
prop. This prop is used to add a 'scroll' eventlistner to the parent div.data (Array)
animation (String)
height (Number)
animation = 'wheel'
) parentHeight (Number)
This is the height of the WheelPicker list. This value is also used in calculating which option is currently in the selector window.
Default value = (#items in data) height. Therefore, if the number of items in the data
prop is 10 and height
of each item is 50px, then parentHeight = 1050 = 500px
Ideal value <= (#items in data) * height
defaultSelection (Number)
updateSelection (Function)
selected index
and can be used to update the state of the component that renders the WheelPicker. Using this selected index and the data array, we can see which option the user has selectedfontSize (Number)