↔️ Swipe.js as a React component
Clone or download
Latest commit a7376b4 Nov 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github update issue template Apr 2, 2016
demo readme and demo updates Nov 22, 2018
src add swipeOptions prop comparison Nov 22, 2018
.babelrc upgrade babel Nov 21, 2018
.editorconfig new version Sep 15, 2016
.gitignore adjustments Nov 22, 2018
.npmignore use callback refs Nov 21, 2018
.prettierignore prettify cleanup Nov 21, 2018
.travis.yml new react version adjustments in demo Nov 21, 2018
README.md readme Nov 22, 2018
package-lock.json 6.0.3 Nov 22, 2018
package.json add build on prepublish Nov 22, 2018
webpack.config.js new react version adjustments in demo Nov 21, 2018

README.md

react-swipe

build status npm version Download Count Buy Me A Coffee

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';

const Carousel = () => {
  let reactSwipeEl;

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

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

Props

  • swipeOptions: ?Object - supports all original options from Swipe.js config. If passed object differs from the previous one react-swipe will re-initiate underlying Swipe.js instance with fresh options

  • 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

  • childCount: ?Number - use it to explicitely tell react-swipe that it needs to re-initiate underlying Swipe.js instance. For example, by setting the childCount prop to the length of the images array 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>

Methods

Component proxies all Swipe.js instance methods.

Playground

Configure the ReactSwipe component in a sandbox environment at CodeSandbox.


MIT Licensed