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

importReactfrom'react';importReactDOMfrom'react-dom';importReactSwipefrom'react-swipe';constCarousel=()=>{letreactSwipeEl;return(<div><ReactSwipeclassName="carousel"swipeOptions={{continuous: false}}ref={el=>(reactSwipeEl=el)}><div>PANE 1</div><div>PANE 2</div><div>PANE 3</div></ReactSwipe><buttononClick={()=>reactSwipeEl.next()}>Next</button><buttononClick={()=>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:

<ReactSwipechildCount={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