Detect Touch Swipe Direction In JavaScript – touchSweep

Preview:

Description:

touchSweep is a JavaScript library for the mobile app that detects the swipe direction and triggers certain functions as you tap and swipe on the screen.

How to use it:

Install and import the touchSweep library into the project.

# Yarn
$ yarn add touchsweep
# NPM
$ npm install touchsweep --save

Initialize the library on the target element where you want to detect the swipe direction.

const el = document.getElementById('touchswipe');
const data = {
      value: 1
};
const threshold = 20;
new TouchSweep(el, data, threshold);

Bind custom events to the swipe & tap events.

el.addEventListener('swipeleft', event => {
  // event.detail
});
el.addEventListener('swiperight', event => {
  // event.detail
});
el.addEventListener('swipedown', event => {
  // event.detail
});
el.addEventListener('swipeup', event => {
  // event.detail
});
el.addEventListener('tap', event => {
  // event.detail
});

Changelog:

v1.1.0 (06/13/2020)

• fixes a minor issue when determing the direction of the swipe