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

by React

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

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

GitHub