React Finger

React Finger is a library of gesture events for React that allows developers to use a single set of events for both desktop and mobile devices.

Install

npm install react-finger --save

Events

  • onPointerDown: Press the mouse or touch point
  • onPointerMove: Moves the mouse or touch point
  • onPointerUp: Bounce the mouse or touch point
  • onPointerCancel: Cancels the mouse or touch point
  • onTap: Quickly tap the mouse or touch point
  • onTapHold: Hold for more than 600ms
  • onDoubleTap: Quick tap twice (within 300ms)
  • onSwipe: Swipe freely
  • onSwipeUp: Swipe up
  • onSwipeRight: Swipe right
  • onSwipeDown: Swipes down
  • onSwipeLeft: Swipe left
  • onPinchStart: Multi-finger gesture start (currently supports two-finger pinch)
  • onPinch: Multi-finger gesture update (currently supports two-finger pinch)
  • onPinchEnd: Multi-finger gesture end (current weight supports two-finger pinch)

Usage

Example 1: Hello React Finger

import { Finger } from "react-finger";

const FingeredDiv = Finger("div");

function Demo(){
  return (
    <FingeredDiv 
      onTap = { event=>console.log('onTap',event) }
      onSwipe = { event=>console.log('onSwipe',event.direction) }
    > 
      Something...
    </FingeredDiv>
  );
}

Example 2: Using useFingerEvents

import { useFingerEvents } from "react-finger";

function Demo(){
  const events = useFingerEvents({
    onTap: event=>console.log('onTap',event),
    onSwipe: event=>console.log('onSwipe',event.direction),
  });
  return (
    <div {...events}> Something... </div>
  );
}

Example 3: Using createFingerEvents

import { createFingerEvents } from "react-finger";

class Demo extends Component {
  events = createFingerEvents({
    onTap: event=>console.log('onTap',event),
    onSwipe: event=>console.log('onSwipe',event.direction),
  });
  render() {
    return (
      <div {...this.events}> Something... </div>
    );
  }
}

Example 4: Bound to the Document

import { FingerProxy } from "react-finger";

function Demo(){
  return (
    <FingerProxy 
      onTap = { event=>console.log('Tap on the document',event) }
    />
  );
}

Example 5: Bound to the Boundary

import { FingerProxy, FingerProxyContainer } from "react-finger";

const YourBoundaryWrapper = FingerProxyContainer("div");

function Demo(){
  return (
    <YourBoundaryWrapper>
      Something...
      <FingerProxy 
        onTap = { event=>console.log('Tap on the Boundary',event) }
      />
      Something...
    </YourBoundaryWrapper>
  );
}

GitHub

View Github