Skip to content

elsa-santos/react-gesture-handler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

React component to detect touch gestures

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published