Swipe.js as a React component
Clone or download
Latest commit 5ce0644 Dec 20, 2017

README.md

react-swipe

build status npm version Download Count

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