
Security News
pnpm 10.12 Introduces Global Virtual Store and Expanded Version Catalogs
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
react-swiper
Advanced tools
Detects and triggers touch events for swiping such as onSwipeLeft, onSwipeDown, etc. with ReactJS
Detects and triggers touch events for swiping such as onSwipeLeft, onSwipeDown, etc. with ReactJS
npm install --save react react-swiper
Creating an example component:
var React = require('react');
var Swiper = require('react-swiper');
React.initializeTouchEvents(true);
var Example = React.createClass({
render: function() {
return (
<Swiper className="swipe-container" onSwipeLeft={this.handleLeftSwipe}>
Hello world!
</Swiper>
);
},
handleLeftSwipe: function (e) {
console.log(e);
}
});
module.exports = Example;
The Swiper
component will render a <div/>
element by default, this can be changed either by providing the tagName
property or the component
property.
Creating a Swiper link (i.e. a swipeable <a/>
element):
var React = require('react');
var Swiper = require('react-swiper');
React.initializeTouchEvents(true);
var Example = React.createClass({
render: function() {
return (
<Swiper tagName="a" href="http://example.com" onSwipe={this.handleSwipe}>
Swipe or click me...
</Swiper>
);
},
handleSwipe: function (e) {
console.log(e);
}
});
module.exports = Example;
Creating a Swiper from another component:
var React = require('react');
var Swiper = require('react-swiper');
var MyComponent = require('./my-component');
React.initializeTouchEvents(true);
var Example = React.createClass({
render: function() {
return (
<Swiper component={MyComponent} propForMyComponent="hello world!" onSwipe={this.handleSwipe} />
);
},
handleSwipe: function (e) {
console.log(e);
}
});
module.exports = Example;
tagName
Type String
Default "div"
Specifies what type of element the Swiper
component should be rendered as. See component
below as well.
component
Type ReactComponent
Default 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.
onSwipe
Type Function(event)
Default undefined
If provided it's called on all swipes.
Example event
:
{
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
}
onSwipe<direction>
Direction Up
, UpRight
, Right
, DownRight
, Down
, DownLeft
, Left
and UpLeft
Type 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.
minSwipeLength
Type Number
Default 75
The minimum swipe length that's required for a swipe event to be triggered.
moveThreshold
Type Number
Default 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
FAQs
Detects and triggers touch events for swiping such as onSwipeLeft, onSwipeDown, etc. with ReactJS
The npm package react-swiper receives a total of 1,358 weekly downloads. As such, react-swiper popularity was classified as popular.
We found that react-swiper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.