Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-gesture-handler

elsa-santos375MIT0.0.5TypeScript support: included

React component to detect touch gestures

react, react-component, touch, gestures, gesture, drag, pinch, rotate, pan, press, swipe, tap, hammerjs

readme

React Gesture Handler

React component to detect touch gestures. It's a react port of hammerjs :)

Events

  • Pan
  • Pinch
  • Press
  • Rotate
  • Swipe
  • Tap

Getting Started

Installing

npm i react-gesture-handler hammerjs --save
npm i @types/hammerjs --save-dev

Usage

Example with pan

import * as React from "react";
import { Gestures } from "react-gesture-handler";

const MyComponent = () => {
  const [eventType, setEventType] = React.useState<string>("");

  const handleGesture = (event: HammerInput) => setEventType(event.type);

  return (
    <Gestures
      recognizers={{
        Pan: {
          events: {
            panleft: handleGesture,
            panright: handleGesture,
            panup: handleGesture,
            pandown: handleGesture
          }
        }
      }}
    >
      <div>
        <h1>Gesture Section {eventType && ` - This is ${eventType}`}</h1>
      </div>
    </Gestures>
  );
};

License

This project is licensed under the MIT License - see the LICENSE.md file for details