Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/voronianski/react-swipe

:left_right_arrow: Swipe.js as a React component
https://github.com/voronianski/react-swipe

Last synced: 2 months ago
JSON representation

:left_right_arrow: Swipe.js as a React component

Lists

README 

        
# react-swipe



[![build status](http://img.shields.io/travis/voronianski/react-swipe.svg?style=flat)](https://travis-ci.org/voronianski/react-swipe)

[![npm version](http://badge.fury.io/js/react-swipe.svg)](http://badge.fury.io/js/react-swipe)

[![Download Count](http://img.shields.io/npm/dm/react-swipe.svg?style=flat)](http://www.npmjs.com/package/react-swipe)

Buy Me A Coffee



> [Brad Birdsall](https://github.com/thebird)'s [Swipe.js](https://github.com/voronianski/swipe-js-iso) as a [React](http://facebook.github.io/react) component.



## Demo



Check out the [demo](http://voronianski.github.io/react-swipe/demo/) from a mobile device (real or emulated).






## Install



```bash

npm install react swipe-js-iso react-swipe --save

```



## Usage



### Examples



```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import ReactSwipe from 'react-swipe';



const Carousel = () => {

  let reactSwipeEl;



  return (

    


       (reactSwipeEl = el)}

      >

        
PANE 1


        
PANE 2


        
PANE 3


      

       reactSwipeEl.next()}>Next

       reactSwipeEl.prev()}>Previous

    


  );

};



ReactDOM.render(, document.getElementById('app'));

```



### Props



- `swipeOptions: ?Object` - supports all original options from [Swipe.js config](https://github.com/voronianski/swipe-js-iso#config-options). 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](https://github.com/voronianski/react-swipe/blob/gh-pages/src/index.js#L28)):



  - `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:



```js

{images}

```



## Methods



Component proxies all [Swipe.js instance methods](https://github.com/voronianski/swipe-js-iso/#swipe-api).



### Playground



Configure the ReactSwipe component in a sandbox environment at [CodeSandbox](https://codesandbox.io/s/q86m8n9qnj).



---



**MIT Licensed**