react-swipeable-views

A React component for swipeable views.

| Package | Version | Download | Size (kB gzipped) | |---------|:--------|:---------|:------------------| | react-swipeable-views | | | 5.08 | | react-swipeable-views-utils | | | 3.52 | | react-swipeable-views-native | | | ? |

Documentation

Get started

• Installation
• Usage
• Example projects
• Supported projects

Component API

• Component API

More

• Supported projects
• Demos

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

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?

• Doctolib
• mastodon
• Material-UI
• Tinder
• Uber
• Are you using this library? Add your company or project.

License

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