Brad Birdsall's Swipe.js, as a React component.
Check out the demo from a mobile device (real or emulated).
npm install react-swipe
Please notice that starting from version 2.1.0
component depends on React 0.13.x
, latest version which depends on React 0.12.x
is 2.0.11
.
var React = require('react')
var ReactSwipe = require('react-swipe')
var Carousel = React.createClass({
render: function () {
return (
<ReactSwipe
continuous={false}
>
<div>'PANE 1'</div>
<div>'PANE 2'</div>
<div>'PANE 3'</div>
</ReactSwipe>
);
}
});
React.render(<Carousel />, document.body)
Properties are duplicates of options from Swipe.js config but there are additional ones:
-
slideToIndex Integer - set index position by Swipe's
.slide()
method oncomponentDidUpdate
lifecycle method. It's useful when you need to controlReactSwipe
by custom next/prev buttons - just update component with new index (it wont be updated if index number is the same as previous one). -
shouldUpdate Function, arguments: nextProps {Object} - by default
<ReactSwipe />
component will rerender itself and children only ifslideToIndex
property has changed. ButshouldUpdate
prop allows to define a function and control rerendering of children on your own.
MIT Licensed