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:

``javascript
const CustomComponent = forwardRef(({ children, ...props }, ref) => (



));
`

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

Usage

1. Install the npm package:

`bash
npm install --save react-scroll-wheel-handler
or
yarn add react-scroll-wheel-handler
`

2. Import it:

`javascript
import ReactScrollWheelHandler from "react-scroll-wheel-handler";
`

3. Config the component:

`javascript
upHandler={(e) => console.log("scroll up")}
downHandler={(e) => console.log("scroll down")}
>
...

`

#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

`javascript
import React, { Component } from "react";
import ReactScrollWheelHandler from " react-scroll-wheel-handler";

class App extends React.Component {
state = {
currentIndex: 0,
colors: ["red", "black", "grey", "blue", "green"],
};
nextIndex = () => {
const { colors, currentIndex } = this.state;
if (currentIndex == colors.length - 1) {
return this.setState({ currentIndex: 0 });
}

return this.setState({
currentIndex: currentIndex + 1,
});
};

prevIndex = () => {
const { colors, currentIndex } = this.state;
if (currentIndex == 0) {
return this.setState({
currentIndex: colors.length - 1,
});
}

return this.setState({
currentIndex: currentIndex - 1,
});
};

render() {
const { colors, currentIndex } = this.state;
return (



);
}
}
``