Simple React component for handling scroll trackpad, arrow keys, swipe gestures and mouse wheel event.
Simple react component for handling scroll trackpad, arrow keys, swipe gestures and mouse wheel event.
#Update
add prop disableSwipe.
removed customStyle from props.
Replace CustomContainerComponent with CustomComponent. It must have ref passed as a prop. Example:
const CustomComponent = forwardRef(({ children, ...props }, ref) => (
<div ref={ref} {...props} id="custom">
{children}
</div>
));
npm install --save react-scroll-wheel-handler
or
yarn add react-scroll-wheel-handler
import ReactScrollWheelHandler from "react-scroll-wheel-handler";
<ReactScrollWheelHandler
upHandler={(e) => console.log("scroll up")}
downHandler={(e) => console.log("scroll down")}
>
...
</ReactScrollWheelHandler>
#Props
All the other props are passed to the div/component returned.
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 (
<div>
<ReactScrollWheelHandler
upHandler={this.prevIndex}
downHandler={this.nextIndex}
style={{
width: "100%",
height: "100vh",
backgroundColor: colors[currentIndex],
transition: "background-color .4s ease-out",
}}
>
<h1>SCROLL FOR CHANGE BACKGROUND COLOR</h1>
</ReactScrollWheelHandler>
</div>
);
}
}