# 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)

> [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

); }; 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**

	Stars	Issues	Version	Updated	Created
react-swipe	1,661	14	6.0.4	5 years ago	10 years ago
react-swipe-to-reveal-options	87	4	0.3.6	8 years ago	9 years ago
react-swipeable-views	4,443	82	0.14.0	3 years ago	9 years ago
react-swiper	140	4	0.1.5	9 years ago	10 years ago

react-swipe vs react-swipe-to-reveal-options vs react-swipeable-views vs react-swiper

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past