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

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

Last synced: 25 days ago
JSON representation

:left_right_arrow: Swipe.js as a React component

• Host: GitHub
• URL: https://github.com/voronianski/react-swipe
• Owner: voronianski
• License: mit
• Created: 2014-07-31T23:44:27.000Z (over 10 years ago)
• Default Branch: gh-pages
• Last Pushed: 2022-03-22T17:07:35.000Z (over 2 years ago)
• Last Synced: 2024-10-08T03:33:46.266Z (about 1 month ago)
• Language: JavaScript
• Homepage: http://voronianski.github.io/react-swipe/demo?continuous=true
• Size: 1.73 MB
• Stars: 1,658
• Watchers: 25
• Forks: 256
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components-all - react-swipe - Swipe.js as a React component. (Uncategorized / Uncategorized)
• awesome-react-components - react-swipe - Swipe.js as a React component. (UI Utilities / Device Input)
• awesome-react - react-swipe - Swipe.js as a React component.  (UI Components / Device Input/User Action)
• awesome-list - react-swipe - Swipe.js as a React component. (UI Utilites / Device Input)
• awesome-react-components - react-swipe - Swipe.js as a React component. (UI Utilities / Device Input)
• awesome-react-components - react-swipe - Swipe.js as a React component. (UI Utilities / Device Input)
• awesome-react-components - react-swipe - Swipe.js as a React component. (UI Utilities / Device Input)
• fucking-awesome-react-components - react-swipe - Swipe.js as a React component. (UI Utilities / Device Input)

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)



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