react-swipe
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-swipe package

6.0.4 • Public • Published

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

Package Sidebar

Install

npm i react-swipe

Weekly Downloads

20,973

Version

6.0.4

License

MIT

Unpacked Size

134 kB

Total Files

10

Last publish

Collaborators

  • dmitri
  • jed