gem-hunter
Language: JavaScript
A React component for swipeable views. :snowflake:
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 | ? |
npm install --save react-swipeable-views
npm install --save react-swipeable-views-native
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.
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;
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;
This project is licensed under the terms of the MIT license.