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
StringDefault
"div"
Specifies what type of element the
Swiper component should be rendered as. See component below as well.$3
Type
ReactComponentDefault
undefined
Specifies what component
Swiper 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
undefined
If provided it's called on all swipes.
Example
event:`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
Up, UpRight, Right, DownRight, Down, DownLeft, Left and UpLeftType
Function(event)Default
undefined
If provided it's called with a swipe event (see example in
onSwipe above) for a swipe in the wanted direction.
E.g. onSwipeUp is called for swipes in the up direction.minSwipeLengthType
NumberDefault
75
The minimum swipe length that's required for a swipe event to be triggered.
moveThresholdType
NumberDefault
10`
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