1.0.1 • Published 5 years ago
react-wheeler v1.0.1
React-Wheeler by Adrian
React component for listening to and acting on scroll/wheel/touchmove events.
How to use
Installation
yarn add react-wheeler
As a component
import Wheeler from 'react-wheeler';
const YourComponent = () => {
const handleWheelStart = () => {};
const handleWheel = ({ delta }) => {};
const handleWheelEnd = ({ delta }) => {};
return (
<>
<Wheeler
onWheel={handleWheel}
onWheelStart={handleWheelStart}
onWheelEnd={handleWheelEnd}
/>
</>
);
};Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| throttle | Number | 20 | How many milliseconds between each onWheel event |
| onWheelStart | func | Fired when wheeling starts | |
| onWheel | func | Fired while wheeling | |
| onWheelEnd | func | Fired when wheeling has stopped | |
| event | String | 'auto' | Which event to listen to. Possible values 'auto', 'wheel', 'touch' |
| elementRef | React ref | Element reference created with React.createRef(). Required for touch |
Development
yarn install to install dependencies
yarn start to start the file watcher to automatically build on file changes
Contribute
I'm open for pull requests if you've got any enhancements! You're a star! ⭐