Skip to content

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

License

Notifications You must be signed in to change notification settings

leon-good-life/wheel-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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;

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published