↔️ Swipe.js as a React component
Clone or download
Latest commit a7376b4 Nov 22, 2018
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



build status npm version Download Count Buy Me A Coffee

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


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


npm install react swipe-js-iso react-swipe --save



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

const Carousel = () => {
  let reactSwipeEl;

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

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


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


Component proxies all Swipe.js instance methods.


Configure the ReactSwipe component in a sandbox environment at CodeSandbox.

MIT Licensed