gem-hunter
Language: JavaScript
:left_right_arrow: Swipe.js as a React component
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 ( <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 one react-swipe will re-initiate underlying Swipe.js instance with fresh options
style: ?Object - object with 3 keys (see defaults):
container: ?Objectwrapper: ?Objectchild: ?Objectregular 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