Osamasomy/wheel-react

Easy integration!!! Easily detect mouse wheel and trackpad movement direction, even when there is no scrolling overflow.

Wheel React

Easy integration!!! Easily detect mouse wheel and trackpad movement direction, even when there is no scrolling overflow.

Usage

1. Install the npm package:

    npm install --save wheel-react

2. Import it:

    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:

    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:

  <YourComponent {...WheelReact.events} />

5. Put the following line in componentWillUnmount function:

   WheelReact.clearTimeout();

Example

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 (
      <div {...WheelReact.events} tabIndex="1" style={styles}>
        {this.state.content}
      </div>
    );
  }
}

export default App;