preact-gestures

Preact Gestures

Preact compatible higher order components for gesture detection

npm i preact-gestures

Gesture detection made easy, even in preact

• Simple, and easy to use: <CompWithGestures onDragStart={dragStarted}>
• Lightweight: ~3kb minified, 1.5kb gzipped
• Multi platform: Handle gestures the same way across devices
• Built-in gesture detectors:
  • onMenu right-click or long tap
  • onDrag click&drag or tap, hold and drag
    • Start
    • Move
    • End
  • ... more in the works

Usage

import { h, render } from 'preact'
import { withGestures } from 'preact-gestures'

let MyComp = () => (
<div>I am a regular component</div>
)
let MyCompWithGestures = withGestures(MyComp)

render(<MyCompWithGestures onDragStart={() => console.log('I am being dragged!')}/>, document.body)

API

withGestures(Component, config)

A higher-order component that add gesture detection to your component

Parameters

Component A Preact functional or class component, or a JSX element config A configuration object for the built-in gesture detectors. Supported parameters:

{
    touchMenuHoldTime = 600, // How many ms does the user has to hold before the onMenu event fires
    touchDragDelay = 500 // How many ms does the user has to hold before a drag starts
}

Returns

The passed in Component with the following additional props

onClick = (event: MouseEvent) => void // Regular click event
onDblclick = (event: MouseEvent) => void // Regular double click event
onMenu = (event: MouseEvent | TouchEvent) => void // Right-click menu, or long tap
onDragStart = (event: MouseEvent | TouchEvent) => void // Fired when the element grabbed AND first moved. On touch devices there's a small delay before tha drag starts
onDragMove = (event: MouseEvent | TouchEvent) => void // Fired after onDragStart for every movement
onDragEnd = (event: MouseEvent | TouchEvent) => void // Fired when the element is dropped

Roadmap

• onSwipe and onZoom gestures
• Pass in custom gesture detectors
• Custom gesture event objects for the callbacks, instead of the event that triggered the gesture
• Typescript definitions

License

MIT (c) Balint Magyar 2019