swipe-event-listener2 v0.0.32

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/browse/swipe-event-listener@1.0.3/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;
};

Returned values

const SwipeEventListener: (
  customOptions: Options
) => {
  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

• Stan Georgian - https://georgianstan.ro

License

This project is licensed under the MIT License