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 --saveimport 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'));-
swipeOptions: ?Object- supports all original options from Swipe.js config. If passed object differs from the previous onereact-swipewill re-initiate underlying Swipe.js instance with fresh options -
style: ?Object- object with 3 keys (see defaults):container: ?Objectwrapper: ?Objectchild: ?Object
-
regular props as
className,idfor root component are also supported -
childCount: ?Number- use it to explicitely tellreact-swipethat it needs to re-initiate underlying Swipe.js instance. For example, by setting thechildCountprop to thelengthof the images array that you pass intoreact-swipe, re-rendering will take place when theimages.lengthdiffers from the previousrenderpass:
<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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent