Easy integration!!! Easily detect mouse wheel and trackpad movement direction, even when there is no scrolling overflow.
npm install wheel-react
Easy integration!!! Easily detect mouse wheel and trackpad movement direction, even when there is no scrolling overflow.
bash
npm install --save wheel-react
`
2. Import it:
javascript
import WheelReact from 'wheel-react';
`
3. Config mouse-wheel/trackpad events ('left', 'right', 'up', 'down'), at least one of them, in your component constructor, or in render function:
javascript
WheelReact.config({
left: () => {
console.log('wheel left detected.');
},
right: () => {
console.log('wheel right detected.');
},
up: () => {
console.log('wheel up detected.');
},
down: () => {
console.log('wheel down detected.');
}
});
`4. Integrate with your React component:
javascript
`5. Put the following line in componentWillUnmount function:
javascript
WheelReact.clearTimeout();
`Example
javascript
import React, { Component } from 'react';
import WheelReact from 'wheel-react';class App extends Component {
constructor(props){
super(props);
this.state = {
content: 'Move your mouse mouse wheel or trackpad or try to scroll here!'
};
WheelReact.config({
left: () => {
this.setState({
content: 'left direction detected.'
});
},
right: () => {
this.setState({
content: 'right direction detected.'
});
},
up: () => {
this.setState({
content: 'up direction detected.'
});
},
down: () => {
this.setState({
content: 'down direction detected.'
});
}
});
}
render() {
let styles = {
height: '400px',
fontSize: '34px',
textAlign: 'center'
};
return (
{this.state.content}
);
}
}export default App;
``