Skip to content

Latest commit

 

History

History
48 lines (33 loc) · 1.7 KB

README.md

File metadata and controls

48 lines (33 loc) · 1.7 KB

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

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.

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