Napoleonic Political Magnificence

    @teachorg/react-swipe

    6.0.4 • Public • Published

    react-swipe

    FORKED from https://github.com/voronianski/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

    Install

    npm i @teachorg/react-swipe

    DownloadsWeekly Downloads

    1

    Version

    6.0.4

    License

    MIT

    Unpacked Size

    185 kB

    Total Files

    11

    Last publish

    Collaborators

    • tomchentw
    • teachorg-developer