react-gesture-handler

react-gesture-handler

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

Install

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

Events

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

Usage

Example:

import { 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: {
                options: { direction: Hammer.DIRECTION_ALL, threshold: 0 },
                events: {
                        panleft: handleGesture,
                        panright: handleGesture,
                        panup: handleGesture,
                        pandown: handleGesture
                    }
                }
            }}
        >
            <div>
                <p>Gesture Section</p>
                {eventType && `This is ${eventType}`}
            </div>
        </Gestures>
    );
}