react-swipe

Brad Birdsall's Swipe.js, as a React component.

Check out the demo from a mobile device (real or emulated).

Installation

npm install react-swipe

Module and React Versions

• 2.0.x - depends on React 0.12.x
• 2.1.x - depends on React 0.13.x
• 3.0.x - depends on React and ReactDOM 0.14.x

Usage

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)

Props

Properties are duplicates of options from Swipe.js config but there are additional ones:

• slideToIndex Integer - set index position by Swipe's .slide() method on componentDidUpdate lifecycle method. It's useful when you need to control ReactSwipe 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 if slideToIndex property has changed. But shouldUpdate prop allows to define a function and control rerendering of children on your own.

---

MIT Licensed