scroll

React component for listening to and acting on scroll/wheel/touchmove events

Jul 01, 2019
React component for listening to and acting on scroll/wheel/touchmove events

React-Wheeler

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

PropTypeDefaultDescription
throttleNumber20How many milliseconds between each onWheel event
onWheelStartfuncFired when wheeling starts
onWheelfuncFired while wheeling
onWheelEndfuncFired when wheeling has stopped
eventString'auto'Which event to listen to. Possible values 'auto', 'wheel', 'touch'
elementRefReact refElement 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

GitHub

Recommended