Super tiny vanilla JS module to detect swipe direction and trigger custom events accordingly.
This module works on touch-enabled devices only.
npm i touchsweep
or
yarn add touchsweep
or
just download this repository and use the files located in dist
folder.
import TouchSweep from 'touchsweep';
const area = document.getElementById('swipe-area');
const data = {
value: 1
};
const touchThreshold = 20;
new TouchSweep(area, data, touchThreshold);
// Then listen for custom swipe events and do your magic:
area.addEventListener('swipeleft', event => {
// You have swiped left
// Custom event data is located in event.detail
});
area.addEventListener('swiperight', event => {
// You have swiped right
// Custom event data is located in event.detail
});
area.addEventListener('swipedown', event => {
// You have swiped down
// Custom event data is located in event.detail
});
area.addEventListener('swipeup', event => {
// You have swiped up
// Custom event data is located in event.detail
});
area.addEventListener('tap', event => {
// You have tapped
// Custom event data is located in event.detail
});
The module constructor accepts three (3) arguments:
element
: A HTML Element. Default isdocument.body
eventData
: A plain JS object. Default is{}
threshold
: How many pixels to count until an event is fired. Default is 40
Currently all evergreen browsers are supported. IE 10+ support is planned in the near future.
There is a simple demo illustrating how the TouchSweep library works.
Check it out here
MIT