React Scroll Wheel Handler

Simple react component for handling scroll trackpad, arrow keys, swipe gestures and mouse wheel event.

Demo

Live Demo

#Update

• 2.0.0:

add prop disableSwipe.

removed customStyle from props.

Replace CustomContainerComponent with CustomComponent. It must have ref passed as a prop. Example:

1const CustomComponent = forwardRef(({ children, ...props }, ref) => (
2  <div ref={ref} {...props} id="custom">
3    {children}
4  </div>
5));

• 1.0.0: change function to check when mouse/trackpad value increase (fix windows scroll)

Usage

1. Install the npm package:

1    npm install --save react-scroll-wheel-handler
2    or
3    yarn add react-scroll-wheel-handler

2. Import it:

1import ReactScrollWheelHandler from "react-scroll-wheel-handler";

3. Config the component:

1<ReactScrollWheelHandler
2  upHandler={(e) => console.log("scroll up")}
3  downHandler={(e) => console.log("scroll down")}
4>
5  ...
6</ReactScrollWheelHandler>

#Props

• upHandler: Function that is triggered on scroll up
• downHandler: Function that is triggered on scroll down
• leftHandler: Function that is triggered on scroll left
• rightHandler: Function that is triggered on scroll right
• CustomComponent: Component with forwardRef. It will be rendered in place of the container div.
• pauseListeners: Boolean. isRequired. Default: false. With this props you can block all events from be fired
• timeout: Integer. isRequired. Default: 600. Timeout between scroll.
• disableKeyboard: Boolean. Default: false.
• disableSwipe: Boolean. Default: false.
• disableSwipeWithMouse: Boolean. Default: false.
• preventScroll: Boolean. isRequired. Prevent scroll, if you want to implement your own scrolling. Default: false.
• wheelConfig: Array. Default: []. Set config for Lethargy lib. Example: [7, 100, 0.05]. stability, sensitivity, tolerance.

All the other props are passed to the div/component returned.

Example

1import React, { Component } from "react";
2import ReactScrollWheelHandler from " react-scroll-wheel-handler";
3
4class App extends React.Component {
5  state = {
6    currentIndex: 0,
7    colors: ["red", "black", "grey", "blue", "green"],
8  };
9  nextIndex = () => {
10    const { colors, currentIndex } = this.state;
11    if (currentIndex == colors.length - 1) {
12      return this.setState({ currentIndex: 0 });
13    }
14
15    return this.setState({
16      currentIndex: currentIndex + 1,
17    });
18  };
19
20  prevIndex = () => {
21    const { colors, currentIndex } = this.state;
22    if (currentIndex == 0) {
23      return this.setState({
24        currentIndex: colors.length - 1,
25      });
26    }
27
28    return this.setState({
29      currentIndex: currentIndex - 1,
30    });
31  };
32
33  render() {
34    const { colors, currentIndex } = this.state;
35    return (
36      <div>
37        <ReactScrollWheelHandler
38          upHandler={this.prevIndex}
39          downHandler={this.nextIndex}
40          style={{
41            width: "100%",
42            height: "100vh",
43            backgroundColor: colors[currentIndex],
44            transition: "background-color .4s ease-out",
45          }}
46        >
47          <h1>SCROLL FOR CHANGE BACKGROUND COLOR</h1>
48        </ReactScrollWheelHandler>
49      </div>
50    );
51  }
52}