A React component for swipeable views. ❄️
Latest commit 92054cf Nov 6, 2018
Permalink
Failed to load latest commit information.
.circleci Upgrade to the stable babel 7 release (#460) Aug 31, 2018
.github [docs] Add examples (#373) Nov 21, 2017
docs [docs] Fix: Resitance -> Resistance (#473) Oct 11, 2018
examples [docs] Add examples (#373) Nov 21, 2017
native add expo demo link (#485) Nov 6, 2018
packages v0.13.0 Sep 24, 2018
pages [docs] Fix the latest regressions (#461) Sep 1, 2018
scripts Upgrade to the stable babel 7 release (#460) Aug 31, 2018
static [docs] Add a Coverflow demo (#398) Nov 27, 2017
test Upgrade to the stable babel 7 release (#460) Aug 31, 2018
.buckconfig [react-native] Upgrade the docs May 6, 2016
.codecov.yml [core] Add test coverage (#394) Nov 26, 2017
.eslintignore Upgrade to the stable babel 7 release (#460) Aug 31, 2018
.eslintrc.js Upgrade to the stable babel 7 release (#460) Aug 31, 2018
.firebaserc core(js): fix deploy script Feb 25, 2018
.gitattributes [npm] Upgrade the dependencies Dec 10, 2016
.gitignore [core] Add test coverage (#394) Nov 26, 2017
.size-limit [core] Upgrade the dependencies (#438) Jun 17, 2018
.watchmanconfig [ReactNative] Upgrade to 0.23.1 Apr 9, 2016
CHANGELOG.md [github] Add a CHANGELOG.md Apr 19, 2016
LICENSE Create LICENSE (#391) Nov 25, 2017
README.md Uber is using the library ❤️ Oct 15, 2018
app.json chore(npm): upgrade demo dependency Feb 6, 2017
babel.config.js Upgrade to the stable babel 7 release (#460) Aug 31, 2018
firebase.json core(js): fix deploy script Feb 25, 2018
lerna.json v0.13.0 Sep 24, 2018
next.config.js Upgrade to the stable babel 7 release (#460) Aug 31, 2018
package.json [docs] Build in production Sep 24, 2018
prettier.config.js core(js): upgrade the project (#363) Nov 2, 2017
yarn.lock Upgrade to the stable babel 7 release (#460) Aug 31, 2018

README.md

react-swipeable-views

A React component for swipeable views.

Package Version Download Size (kB gzipped)
react-swipeable-views npm version npm downloads 5.08
react-swipeable-views-utils npm version npm downloads 3.52
react-swipeable-views-native npm version npm downloads ?

Build Status Dependencies DevDependencies Donate TypeScript definitions on DefinitelyTyped Coverage Status

Installation

Browser

npm install --save react-swipeable-views

Native (experimental)

npm install --save react-swipeable-views-native

The problem solved

Check out the demos from a mobile device (real or emulated). It's tiny (<10 kB gzipped), it quickly renders the first slide, then lazy-loads the others.

Simple example

usage

Browser

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

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

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

export default MyComponent;

Native (experimental)

react-native support is experimental and I have no plan pushing it forward. I start to think that lower level abstraction to share the implementation between the platforms are more appropriate. We have two different implementations of the react-swipeable-views API.

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

import SwipeableViews from 'react-swipeable-views-native';
// There is another version using the scroll component instead of animated.
// I'm unsure which one give the best UX. Please give us some feedback.
// import SwipeableViews from 'react-swipeable-views-native/lib/SwipeableViews.scroll';

const styles = StyleSheet.create({
  slideContainer: {
    height: 100,
  },
  slide: {
    padding: 15,
    height: 100,
  },
  slide1: {
    backgroundColor: '#FEA900',
  },
  slide2: {
    backgroundColor: '#B3DC4A',
  },
  slide3: {
    backgroundColor: '#6AC0FF',
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

const MyComponent = () => (
  <SwipeableViews style={styles.slideContainer}>
    <View style={[styles.slide, styles.slide1]}>
      <Text style={styles.text}>
        slide n°1
      </Text>
    </View>
    <View style={[styles.slide, styles.slide2]}>
      <Text style={styles.text}>
        slide n°2
      </Text>
    </View>
    <View style={[styles.slide, styles.slide3]}>
      <Text style={styles.text}>
        slide n°3
      </Text>
    </View>
  </SwipeableViews>
);

export default MyComponent;

Who's using react-swipeable-views?

License

This project is licensed under the terms of the MIT license.