react-simple-swipe

This is a simple web and mobile compatible swiping component. It's completely controlled so you will need to handle the index changing, and transition time of the durations as well as controlling the width/height of your images.

You can simply copy and paste some of the actions below.

Original inspired by this tutorial https://codedaily.io/tutorials/67/Create-a-Snapping-Image-Swiper-like-Instagram-with-React

Install

yarn add react-simple-swipe

or

npm install react-simple-swipe --save

Usage

import React from "react";
import Swipes from "react-simple-swipe";
 
const IMAGES = ["/img1.jpg", "/img2.jpg", "/img3.jpg", "/img4.jpg"];
 
class Example extends React.Component {
  state = {
    index: 0,
    transitionTime: 0
  };
  render() {
    return (
      <Swipes
        render={() => {
          // Must return an array
          return IMAGES.map(src => {
            return (
              <img
                key={src}
                src={src}
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "contain"
                }}
              />
            );
          });
        }}
        width={500}
        height={300}
        index={this.state.index}
        transitionTime={this.state.transitionTime}
        onIndexChange={(index, transitionTime) => {
          this.setState({
            index,
            transitionTime 
          });
        }}
        onTransitionComplete={() => {
          this.setState({
            transitionTime: 0
          });
        }}
      />
    );
  }
}

Next / Back Buttons

Because it's controlled the next/back buttons can be implemented by you however you want.

Instant changes can be done by just setting index, or animated transitions can be created by setting index and transitionTime together.

const back = state => ({
  index: state.index - 1,
  transitionTime: 0.5,
});
 
const next = state => ({
  index: state.index + 1,
  transitionTime: 0.5,
});

<div>
  <button onClick={() => this.setState(back)}>Prev</button>
  <button onClick={() => this.setState(next)}>Next</button>
</div>

License

MIT © browniefed