Description:
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:
