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 --save

Usage

Examples

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

class Carousel extends React.Component {
  next() {
    this.reactSwipeEl.next();
  }

  prev() {
    this.reactSwipeEl.prev();
  }

  render() {
    return (
      <ReactSwipe
        className="carousel"
        swipeOptions={{ continuous: false }}
        ref={el => this.reactSwipeEl = el}
      >
        <div>PANE 1</div>
        <div>PANE 2</div>
        <div>PANE 3</div>
      </ReactSwipe>
      <button onClick={() => this.next()}>Next</button>
      <button onClick={() => this.prev()}>Previous</button>
    );
  }
}

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

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

In order for react-swipe to know that it needs to be re-rendered you should supply the childCount property to the component.

By setting the childCount 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 childCount={images.length}>{images}</ReactSwipe>

Playground

Configure the ReactSwipe component in a sandbox environment at CodeSandbox.

MIT Licensed