@vielzeug/gesture

Framework-neutral two-dimensional pointer drag and one-axis pan recognition with lifecycle-owned handles

Installation

pnpm add @vielzeug/gesture
npm install @vielzeug/gesture
yarn add @vielzeug/gesture

Quick Start

import { createDragGesture, createPanGesture } from '@vielzeug/gesture';

const element = document.querySelector<HTMLElement>('[data-swipe]');
if (!element) throw new Error('Missing [data-swipe] element');

const pan = createPanGesture(element, {
  activationDistance: 6,
  axis: 'x',
  onMove: ({ distance }) => {
    element.style.transform = `translateX(${distance}px)`;
  },
  onEnd: ({ distance, reason }) => {
    element.style.transform = '';

    if (reason === 'release' && Math.abs(distance) >= 48) {
      pan.dispose();
      element.remove();
    }
  },
});

window.addEventListener('pagehide', () => pan.dispose(), { once: true });

Documentation

• Overview
• Usage Guide
• API Reference
• Examples
• Migration Guide

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.