vanilla-swipe

vanilla-swipe

Tiny vanilla JS library to detect swipe direction.

Types

type ConstructorProps = {
  element?: HTMLElement | null;
  rotationAngle?: number | 0;
  delta?: number | 10; // minimum distance to the start of the swiping (px)
  mouseTrackingEnabled?: boolean | false;
  touchTrackingEnabled?: boolean | true;
  preventDefaultTouchmoveEvent?: boolean | false; // stop the browser scrolling while swiping
  onSwiping?: EventHandler;
  onSwiped?: EventHandler;
  onTap?: (e: Event) => void;
};

type EventHandler = {
  (
    e: Event,
    deltaX: number,
    deltaY: number,
    absX: number,
    absY: number,
    duration: number, // ms
    velocity: number // (px/ms)
  ): void;
};

Methods

• init(): void
• update(options: ConstructorProps): void
• destroy(): void

Install

npm install vanilla-swipe

Examples

import VanillaSwipe from 'vanilla-swipe';

const VS = new VanillaSwipe({
  element: document.getElementById('some-id');
  onSwiping: handler,
  onSwiped: handler,
  mouseTrackingEnabled: true,
});

VS.init();

function handler() {
  console.log(...arguments); // -> Event, deltaX, deltaY, absX, absY, duration, velocity
}

Tests

npm test

Coverage

npm run testWithCoverage