Skip to content

Latest commit

 

History

History
96 lines (86 loc) · 2.15 KB

README.md

File metadata and controls

96 lines (86 loc) · 2.15 KB

Wheel React

npm version

NPM

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
  1. Import it:
    import WheelReact from 'wheel-react';
  1. 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.');
      }
    });
  1. Integrate with your React component:
  <YourComponent {...WheelReact.events} />
  1. 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;