react-swipe

react-swipe

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

Demo

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

Install

npm install react swipe-js-iso react-swipe

Usage

Example

import React from 'react'
import ReactDOM from 'react-dom';
import ReactSwipe from 'react-swipe';

class Carousel extends React.Component {
    render() {
        return (
            <ReactSwipe className="carousel" swipeOptions={{continuous: false}}>
                <div>PANE 1</div>
                <div>PANE 2</div>
                <div>PANE 3</div>
            </ReactSwipe>
        );
    }
}

ReactDOM.render(
    <Carousel />, 
    document.getElementById('app')
);

Source code of demo is available here.

Props

• swipeOptions: ?Object - supports all original options from Swipe.js config
• style: ?Object - object with 3 keys (see defaults):
  • container: ?Object
  • wrapper: ?Object
  • child: ?Object
• regular props as className, id for root component are also supported

Methods

Component proxies all Swipe.js instance methods.

Re-rendering

See related issue.

In order for react-swipe to know that it needs to be re-rendered, you should supply the key property to the component. By setting the key to the length of the images that you pass into react-swipe, re-rendering will take place when the images.length differs from the previous render pass:

<ReactSwipe key={images.length}>
    {images}
</ReactSwipe>

MIT Licensed