VilleMiekkoja / react-swipeable-views

A React component for swipeable views. :snowflake:

React swipeable views

A React component for swipeable views.

Check out the demos from a mobile device (real or emulated). It is tiny (<4kB) and quickly render the first slide then lasy-load the other.

Installation

npm install react-swipeable-views

Usage

import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const MyComponent = () => (
  <SwipeableViews>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      slide n°1
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      slide n°2
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      slide n°3
    </div>
  </SwipeableViews>
);

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
};

export default MyComponent;

Properties

Name	Type	Default	Description
children	node		Use this property to provide your slides.
containerStyle	object	{}	Whether or not the auto complete is animated as it is toggled.
disabled	bool	false	If true, it will disable touch events. This is useful when you want to prohibit the user from changing slides.
index	integer	0	This is the index of the slide to show. This is useful when you want to change the default slide shown. Or when you have tabs linked to each slide.
onChangeIndex	Function(index, fromIndex)		This is callback prop. It's call by the component when the shown slide change after a swipe made by the user. This is useful when you have tabs linked to each slide.
onSwitching	Function(index)		This is callback prop. It's called by the component when the slide switching. This is useful when you want to implement something corresponding to the current slide position.
resistance	bool	false	If true, it will add bounds effect on the edges.
style	object	{}	This is the inlined style that will be applied on the root component.
threshold	integer	5	This is the threshold used for detectinga quick swipe. If the computed speed is above this value, the index change.

Any other properties like className will be applied to the root component.

License

MIT