react-gesture-handler
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

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

Package Sidebar

Install

npm i react-gesture-handler

Weekly Downloads

59

Version

0.0.5

License

MIT

Unpacked Size

13.2 kB

Total Files

20

Last publish

Collaborators

  • elsa-santos