react-swipeable-views

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>
    

    

    

  </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.

…

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.