@jewel_ml/vanilla-swipe

vanilla-swipe

Tiny vanilla JS library to detect swipe direction.

👉 Live demo.

Types

type ConstructorProps = {
  element?: HTMLElement | null;
  target?: HTMLElement | null;
  delta?: number | 10;
  directionDelta?: number | 0;
  rotationAngle?: number | 0;
  mouseTrackingEnabled?: boolean | false;
  touchTrackingEnabled?: boolean | true;
  preventDefaultTouchmoveEvent?: boolean | false;
  preventTrackingOnMouseleave?: boolean | false;
  onSwipeStart?: EventHandler;
  onSwiping?: EventHandler;
  onSwiped?: EventHandler;
  onTap?: EventHandler;
};

type EventHandler = {
  (e: Event, data: EventData): void;
};

type EventData = {
  absX: number;
  absY: number;
  deltaX: number;
  deltaY: number;
  directionX: 'LEFT' | 'RIGHT' | 'NONE';
  directionY: 'TOP' | 'BOTTOM' | 'NONE';
  duration: number; // ms
  velocity: number; // (px/ms)
};

Props

• element - target event trigger
• target - additionally target event trigger, if specified with the element, will be used by all handlers to trigger the action
• delta - minimal distance in px before a swipe starts
• directionDelta - minimum distance in px required for the direction to be reversed while swiping.
• rotationAngle - rotation angle
• mouseTrackingEnabled - enable mouse tracking
• touchTrackingEnabled - enable touch tracking
• preventDefaultTouchmoveEvent - prevent default touch events while touching
• preventTrackingOnMouseleave - triggered onSwiped callback when the event loses the element's focus
• onSwipeStart - triggered on swipe start (if the delta is passed)
• onSwiping - triggered during swipe
• onSwiped - triggered after swipe
• onTap - triggered when the swipe value is less than the minimum distance (delta)

Methods

• init(): void
• update(options: ConstructorProps): void
• destroy(): void
• static isTouchEventsSupported(): boolean

Install

npm install vanilla-swipe

Examples

import VanillaSwipe from 'vanilla-swipe';

const isTouchEventsSupported = VanillaSwipe.isTouchEventsSupported();

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

VS.init();

function handler() {
  console.log(...arguments); // -> Event, EventData
}

Run project

npm i
npm start

Tests

npm test

Coverage

npm run test:coverage