app-gesture-decorator v0.1.12

app-gesture-decorator

A decorator for React UI components to handle gesture recognising using HammerJS.

Features

• Allow your components to recognise the gestures on both desktop and mobile browsers.
• Prevent ghost click for your React UI components on the mobile browsers.
• Polyfill the HTMLElement with a trigger method that allows easier HTMLEvents and MouseEvents simulating.

Browsers Support

Prerequisites

• Install Node >= 5.6.0

$ brew install node

• Install NPM >= 3.8.0

$ npm update -g npm

Installation

Install the plugin via NPM:

$ npm install --save app-gesture-decorator

How To Use

Step 1: Import and use it to decorate the React component(e.g. MyComponent.jsx) using es6/es7.

import { Component } from 'react';
import AppGestureDecorator from 'app-gesture-decorator';

@AppGestureDecorator()
export default class MyComponent extends Component {
  ...

  componentDidMount() {
    this.initGestureHandler();
  }

  componentWillUnmount() {
    this.removeGestureHandler();
  }

  ...
}

Step 2: Try out the gesture handler using props, e.g. tap. For the full list of gesture handlers, please check the Gestures section.

import { Component } from 'react';
import MyComponent from './MyComponent.jsx';

export default class MyPage extends Component {
  ...

  handleTap(e) {
    console.log(e);
  }

  render() {
    return (
      <div>
        <MyComponent onTap={this.handleTap.bind(this)} />
      </div>
    );
  }
}

Gestures

• onTap
• onDoubleTap
• onPan
• onPanStart
• onPanMove
• onPanEnd
• onPanCancel
• onPanLeft
• onPanRight
• onPanUp
• onPanDown
• onPinch
• onPinchStart
• onPinchMove
• onPinchEnd
• onPinchCancel
• onPinchIn
• onPinchOut
• onPress
• onPressUp
• onRotate
• onRotateStart
• onRotateMove
• onRotateEnd
• onRotateCancel
• onSwipe
• onSwipeLeft
• onSwipeRight
• onSwipeUp
• onSwipeDown