swipe-js-listener

A small class to listen swipe events and invoke callbacks to them


Keywords
swipe, gesture, event, listener, js, web
License
MIT
Install
npm install swipe-js-listener@1.3.1

Documentation

swipeJsListener

A small class to listen swipe events and invoke callbacks to them

npm version Build Status Coverage Status Known Vulnerabilities Greenkeeper badge Conventional Commits

Usage: This can be used with React and any other framework/lib you may want, at the bottom line is a simple class that invoke callbacks. This is usefull if you want detect some interaction with screen, like and open menu that on swipe must be closed, all using JS.

Install with Npm

npm i swipe-js-listener

It should be compatible with bundlers like webpack using mobule.exports as also to projects using require/amd.

import SwipeJsListener from 'SwipeJsListener';
require('swipeJsListener');

You can also download the JS in the dist folder and include in your project, it already supports the necessary Polyfills.

<script src="path/swipeJsListener.js" type="text/javascript"></script>

And in your view or js you can use it, the first argument is the context(this) and the second is an Object that can contains keys pointing to the callbacks, you can pass only the keys you use, you're not obliged to pass all the keys as parameters in the Object.

//Scope declaration only to show context.
(function() {
    
    remove = function() {
        this.swipeJsListener.removeSwipeListener();
    }

    onLeftSwipe = function() {
        console.log('On left swipe');
    }
    onRightSwipe = function() {
        console.log('On right swipe');
    }
    onUpSwipe = function() {
        console.log('On up swipe');
    }
    onDownSwipe = function() {
        console.log('On down swipe');
    }
    
    this.swipeJsListener = new SwipeJsListener();
    this.swipeJsListener.addSwipeListener(this, {
        callbackToSwipeLeft: onLeftSwipe,
        callbackToSwipeRight: onRightSwipe,
        callbackToSwipeUp: onUpSwipe,
        callbackToSwipeDown: onDownSwipe,
    });
    
})();