wheel-react's Introduction

Wheel React

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

Usage

Install the npm package:

    npm install --save wheel-react

Import it:

    import WheelReact from 'wheel-react';

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.');
      }
    });

Integrate with your React component:

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

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;

Recommend Projects