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;
})