Detects and triggers touch events for swiping such as onSwipeLeft, onSwipeDown, etc. with ReactJS
npm install react-swiperreact-swiper
================
> Detects and triggers touch events for swiping such as onSwipeLeft, onSwipeDown, etc. with ReactJS
``bash`
npm install --save react react-swiper
Creating an example component:
`javascript
var React = require('react');
var Swiper = require('react-swiper');
React.initializeTouchEvents(true);
var Example = React.createClass({
render: function() {
return (
Hello world!
);
},
handleLeftSwipe: function (e) {
console.log(e);
}
});
module.exports = Example;
`
The Swiper component will render a
element by default, this can be changed either by providing the tagName property or the component property.$3
Creating a Swiper link (i.e. a swipeable
element):`javascript
var React = require('react');
var Swiper = require('react-swiper');React.initializeTouchEvents(true);
var Example = React.createClass({
render: function() {
return (
Swipe or click me...
);
},
handleSwipe: function (e) {
console.log(e);
}
});
module.exports = Example;
`$3
Creating a Swiper from another component:
javascript
var React = require('react');
var Swiper = require('react-swiper');
var MyComponent = require('./my-component');React.initializeTouchEvents(true);
var Example = React.createClass({
render: function() {
return (
);
},
handleSwipe: function (e) {
console.log(e);
}
});
module.exports = Example;
`Properties
$3
Type
Default
Specifies what type of element the
component should be rendered as. See component below as well.$3
Type
ReactComponentDefault
Specifies what component
should be rendered as. See tagName above as well. If both tagName and component are specified the later takes precedence.$3
Type
Function(event)Default
If provided it's called on all swipes.
Example
:`javascript
{
type: String, // The type of swipe, e.g. "swipeLeft", "swipeUp" or "swipeDownRight"
timeStampStart: Date, // Timestamp for when the swipe was initiated
timeStampEnd: Date, // Timestamp for when the swipe was finished,
initialTouch: Touch, // A Touch object for the initial touch position - https://developer.mozilla.org/en-US/docs/Web/API/Touch
finalTouch: Touch, // A Touch object for the final touch position
}
`$3
Direction
, UpRight, Right, DownRight, Down, DownLeft, Left and UpLeftType
Default
If provided it's called with a swipe event (see example in
above) for a swipe in the wanted direction.
E.g. onSwipeUp is called for swipes in the up direction.minSwipeLengthType
Default
The minimum swipe length that's required for a swipe event to be triggered.
Type
Default
The minimum move length in one direction to be considered as the swipe direction, this also affects the required velocity in which the swipe must occur.
MIT