Swipe Tracker For React

The React Swipe Component allows you to keep track of swipe events on mobile app.

Installation:

# NPM
$ npm install react-swipe-component --save

Usage:

import React, {Component} from 'react';
import {render} from 'react-dom';
import Swipe from 'react-swipe-component';

class Demo extends Component{
    constructor(){
        super();
        this.onSwipeLeftListener = this._onSwipeLeftListener.bind(this);
        this.onSwipeRightListener = this._onSwipeRightListener.bind(this);
        this.onSwipeDownListener = this._onSwipeUpListener.bind(this);
        this.onSwipeUpListener = this._onSwipeDownListener.bind(this);
        this.onSwipeListener = this._onSwipeListener.bind(this);
    }
    render() {
        return (<Swipe
                nodeName="div"
                className="test"
                mouseSwipe={false}
                onSwipedLeft={this.onSwipeLeftListener}
                onSwipedRight={this.onSwipeRightListener}
                onSwipedDown={this.onSwipeDownListener}
                onSwipedUp={this.onSwipeUpListener}
                onSwipe={this.onSwipeListener}>
            Demo
        </Swipe>);
    }
    _onSwipeLeftListener(){
        console.log("Swiped left");
    }
    _onSwipeRightListener(){
        console.log("Swiped right");
    }
    _onSwipeUpListener(){
        console.log("Swiped Up");
    }
    _onSwipeDownListener() {
        console.log("Swiped down");
    }
    _onSwipeListener(e){
        if (e[1]===0) console.log("Swipe x: "+e[0]);
        else if (e[0]===0) console.log("Swipe y: "+e[1]);
    }
}

render(<Demo/>, document.getElementById('app') );

Default props.

delta: 50,
mouseSwipe: false,
preventDefaultEvent: false,

onSwipe: ()=>{},
onSwipeEnd: ()=>{},
onSwipingUp: ()=>{},
onSwipingRight: ()=>{},
onSwipingDown: ()=>{},
onSwipingLeft: ()=>{},
onSwipedUp: ()=>{},
onSwipedRight: ()=>{},
onSwipedDown: ()=>{},
onSwipedLeft: ()=>{},
onTransitionEnd: ()=>{}

Preview:

Swipe Tracker For React

Download Details:

Author: exelban

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/exelban/react-swipe-component

License: MIT

You Might Be Interested In:

Tags:

Add Comment