React Support

[lyfeyaj]

Usage

Prerequisite

Install swipejs via npm install swipejs

Example

'use strict';

import React from 'react';
import { Swipe, SwipeItem } from 'swipejs/react';

class HomePage extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {};
  }

  componentDidMount() {
    let mySwipe = this.refs.swipe.instance;
    // You can call swipe methods on `mySwipe`
    // mySwipe.prev()
    // mySwipe.next()
    // mySwipe.getPos()
    // mySwipe.getNumSlides()
    // mySwipe.slide()
    // mySwipe.restart()
    // mySwipe.stop()
    // mySwipe.kill()
  }

  onTransactionEnd(index, elem) {
    // Your own logic
  }

  handleCallback(index, elem) {
    // Your own logic
  }

  handleClick(e) {
    // Your own logic
  }

  render() {
    return (
      <Swipe className='custom-swipe-container-class'
             ref='swipe'
             startSlide={0}
             speed={300}
             auto={3000}
             draggable={false}
             continuous={true}
             autoRestart={false}
             disableScroll={false}
             stopPropagation={false}
             callback={this.handleCallback.bind(this)}
             transitionEnd={this.onTransactionEnd.bind(this)}>
        <SwipeItem className='custom-swipe-item-class'
                   onClick={this.handleClick.bind(this)}>
          Slide One
        </SwipeItem>
        <SwipeItem className='custom-swipe-item-class'
                   onClick={this.handleClick.bind(this)}>
          Slide Two
        </SwipeItem>
        <SwipeItem className='custom-swipe-item-class'
                   onClick={this.handleClick.bind(this)}>
          Slide Three
        </SwipeItem>
      </Swipe>
    );
  }
}

[lyfeyaj]

@loup-brun Any advice on this PR?

[pcg92]

Thank you! m going to try it just now

[pcg92]

Im getting this problem:

swipe.js:63 Uncaught TypeError: Cannot assign to read only property 'continuous' of object '#

options.continuous = options.continuous !== undefined ? options.continuous : true;

[pcg92]

I cant use this component, the dom is rendered but on the browser i didnt see anything

[loup-brun]

@lyfeyaj Haven't worked with React... I'll look into it if I have time!

[lyfeyaj]

@pcegarra Fixed