Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-swiper

Package Overview
Dependencies
1
Maintainers
1
Versions
6
Issues
File Explorer

Advanced tools

react-swiper

Detects and triggers touch events for swiping such as onSwipeLeft, onSwipeDown, etc. with ReactJS

    0.1.5latest

Version published
Maintainers
1
Yearly downloads
12,023
increased by307.15%

Weekly downloads

Readme

Source

react-swiper

Detects and triggers touch events for swiping such as onSwipeLeft, onSwipeDown, etc. with ReactJS

Installation

npm install --save react react-swiper

Usage

Example with defaults

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.

Example with custom element

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;

Example with custom component

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;

Properties

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.

License

MIT

Keywords

FAQs

What is react-swiper?

Detects and triggers touch events for swiping such as onSwipeLeft, onSwipeDown, etc. with ReactJS

Is react-swiper popular?

The npm package react-swiper receives a total of 296 weekly downloads. As such, react-swiper popularity was classified as not popular.

Is react-swiper well maintained?

We found that react-swiper demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 22 Oct 2015
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc