Skip to content

GeorgianStan/swipe-event-listener

Repository files navigation

Swipe Event Listener

swipe-event-listener is a very minimal library that allows listening for swipe gesture, including the ones from the mouse from any DOM element. Once invoked with a DOM element, simply listen for swipe events.

Installation

Browser

<script src="https://unpkg.com/[email protected]/dist/swipe-event-listener.js"></script>

Then anywhere in your JavaScript code.

const { SwipeEventListener } = window.SwipeEventListener;

OR

const SwipeEventListener = window.SwipeEventListener.SwipeEventListener;

Via NPM

npm i swipe-event-listener

Then anywhere in your code.

import { SwipeEventListener } from 'swipe-event-listener';

OR

const SwipeListener = require('swipe-listener');

How to use it

const { swipeArea, updateOptions } = SwipeEventListener({
  swipeArea: document.querySelector('body'),
});

swipeArea.addEventListener('swipeDown', () => {
  console.log('swipe down');
});
swipeArea.addEventListener('swipeUp', () => {
  console.log('swipe up');
});

swipeArea.addEventListener('swipeLeft', () => {
  console.log('swipe left');
});

swipeArea.addEventListener('swipeRight', () => {
  console.log('swipe right');
});

Configuration options

const SwipeEventListener: (
  customOptions: Options,
) => {
  swipeArea: HTMLElement;
  updateOptions: (newOptions: Options) => void;
};
Option Required Type Default Description
swipeArea yes HTMLElement undefined The container where the swipe event can take place.
swipeSensitivity no number 80 Swipe sensitivity in pixels. Across how many pixels does the cursor need to move to trigger the swipe event.
isSwipeUpDesired no boolean yes Enable swipeUp event.
isSwipeDownDesired no boolean yes Enable swipeDown event.
isSwipeLeftDesired no boolean yes Enable swipeLeft event.
isSwipeRightDesired no boolean yes Enable swipeRight event.
listenForMouseEvents no boolean yes Enable swipe event using mouse event.
listenForTouchEvents no boolean yes Enable swipe event using touch events (used for mobile).

Returned values

const SwipeEventListener = (customOptions: Options): SwipeEventListene => {...}
export interface SwipeEventListener {
  swipeArea: HTMLElement;
  updateOptions: (newOptions: Options) => void;
}
  • swipeArea - the same HTMLElement passed as argument
  • updateOptions - used to update all the options listed above

Typescript ready

Types are included and are available for importation.

swipe-event-listener.d.ts

export interface Options {
  swipeSensitivity: number;
  isSwipeUpDesired: boolean;
  isSwipeDownDesired: boolean;
  isSwipeLeftDesired: boolean;
  isSwipeRightDesired: boolean;
  listenForTouchEvents: boolean;
  listenForMouseEvents: boolean;
  swipeArea: HTMLElement;
}
export declare enum CustomSwipeEvents {
  swipeUp = 'swipeUp',
  swipeDown = 'swipeDown',
  swipeLeft = 'swipeLeft',
  swipeRight = 'swipeRight',
}
export declare const SwipeEventListener: (
  customOptions: Options,
) => {
  swipeArea: HTMLElement;
  updateOptions: (newOptions: Options) => void;
};

Authors

License

This project is licensed under the MIT License