on-swipe

Adds a swipe event do the DOM that reports direction, velocity, distance, and duration.

tldr;

import onSwipe from 'on-swipe';

// register swipe event emitter
onSwipe();

// listen for swipe event
document.addEventListener('swipe', (event) => {

    // use swipe
    console.log(event.detail);
})

Install

npm install --save on-swipe

Use

Call onSwipe() once after your app loads.

Syntax

onSwipe({options})

• options is an object with the following optional properties:
  • node: document DOM node you want to broadcast the swipe event from.
  • sensitivity: 5 number of touch moves before emitting a swipe event.
  • bubbles: true if the event should bubble.
  • cancelable: true if the event.preventDefault() should work.

Returns

The swipe events event.detail attribute contains the following properties:

Variable	Type	Description
direction	string	The direction of the swipe in [left, right, up, down]
velocity	float	velocity of swipe in pixels/millisecond
distance	float	distance of swipe in pixels
duration	int	duration of swipe in milliseconds
dx	float	distance of swipe x direction
dy	float	distance of swipe y direction

Examples

Default

import onSwipe from 'on-swipe';

// register swipe event emitter
onSwipe();

// listen for swipe event
document.addEventListener('swipe', (event) => {

    // use swipe
    let { direction, velocity, distance, duration } = event.detail;
})

Options

import onSwipe from 'on-swipe';

// register swipe event emitter
onSwipe({ node: window, sensitivity: 10 });

// listen for swipe event
window.addEventListener('swipe', (event) => {

    // use swipe
    let { direction, velocity, distance, duration } = event.detail;
})