react-wheeler

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! ⭐