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 | ? |
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 => slide n°1 </div> <div => slide n°2 </div> <div => slide n°3 </div> </SwipeableViews>; ;
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; const MyComponent = <SwipeableViews => <View => <Text => slide n°1 </Text> </View> <View => <Text => slide n°2 </Text> </View> <View => <Text => slide n°3 </Text> </View> </SwipeableViews>; ;
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.