🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

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.


You May Also Like