Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oliviertassinari/react-swipeable-views
A React component for swipeable views. :snowflake:
https://github.com/oliviertassinari/react-swipeable-views
component react react-native swipe swipeable
Last synced: 5 days ago
JSON representation
A React component for swipeable views. :snowflake:
- Host: GitHub
- URL: https://github.com/oliviertassinari/react-swipeable-views
- Owner: oliviertassinari
- License: mit
- Created: 2015-09-22T15:32:21.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-05-07T12:35:10.000Z (8 months ago)
- Last Synced: 2024-12-31T12:03:22.718Z (12 days ago)
- Topics: component, react, react-native, swipe, swipeable
- Language: JavaScript
- Homepage: https://react-swipeable-views.com/
- Size: 4.17 MB
- Stars: 4,467
- Watchers: 35
- Forks: 483
- Open Issues: 83
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-swipeable-views - A React Component for binded Tabs and Swipeable Views. (UI Components / UI Navigation)
- awesome-react - react-swipeable-views - A React Component for binded Tabs and Swipeable Views. ![](https://img.shields.io/github/stars/oliviertassinari/react-swipeable-views.svg?style=social&label=Star) (UI Components / Navigation)
- awesome-react-components - react-swipeable-views - A React Component for binded Tabs and Swipeable Views. (UI Components / UI Navigation)
- awesome-react-components - react-swipeable-views - A React Component for binded Tabs and Swipeable Views. (UI Components / UI Navigation)
- awesome-list - react-swipeable-views
- awesome-react-components - react-swipeable-views - A React Component for binded Tabs and Swipeable Views. (UI Components / UI Navigation)
- fucking-awesome-react-components - react-swipeable-views - A React Component for binded Tabs and Swipeable Views. (UI Components / UI Navigation)
- awesome-react-components - react-swipeable-views - A React Component for binded Tabs and Swipeable Views. (UI Components / UI Navigation)
- awesome-react-components - react-swipeable-views - A React Component for binded Tabs and Swipeable Views. (UI Components / UI Navigation)
README
# react-swipeable-views
> A React component for swipeable views.
| Package | Version | Download | Size (kB gzipped) |
|---------|:--------|:---------|:------------------|
| react-swipeable-views | [![npm version](https://img.shields.io/npm/v/react-swipeable-views.svg)](https://www.npmjs.com/package/react-swipeable-views) | [![npm downloads](https://img.shields.io/npm/dm/react-swipeable-views.svg)](https://www.npmjs.com/package/react-swipeable-views) | 5.08 |
| react-swipeable-views-utils | [![npm version](https://img.shields.io/npm/v/react-swipeable-views-utils.svg)](https://www.npmjs.com/package/react-swipeable-views-utils) | [![npm downloads](https://img.shields.io/npm/dm/react-swipeable-views-utils.svg)](https://www.npmjs.com/package/react-swipeable-views-utils) | 3.52 |
| react-swipeable-views-native | [![npm version](https://img.shields.io/npm/v/react-swipeable-views-native.svg)](https://www.npmjs.com/package/react-swipeable-views-native) | [![npm downloads](https://img.shields.io/npm/dm/react-swipeable-views-native.svg)](https://www.npmjs.com/package/react-swipeable-views-native) | ? |[![Build Status](https://travis-ci.org/oliviertassinari/react-swipeable-views.svg?branch=master)](https://travis-ci.org/oliviertassinari/react-swipeable-views)
[![Dependencies](https://img.shields.io/david/oliviertassinari/react-swipeable-views.svg)](https://david-dm.org/oliviertassinari/react-swipeable-views)
[![DevDependencies](https://img.shields.io/david/dev/oliviertassinari/react-swipeable-views.svg)](https://david-dm.org/oliviertassinari/react-swipeable-views#info=devDependencies&view=list)
[![Donate](https://img.shields.io/badge/$-support-green.svg)](https://www.paypal.me/oliviertassinari/10)
[![TypeScript definitions on DefinitelyTyped](https://img.shields.io/badge/style-.d.ts-green.svg?style=flat&label=DefinitelyTyped)](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-swipeable-views)
[![Coverage Status](https://img.shields.io/codecov/c/github/oliviertassinari/react-swipeable-views/master.svg)](https://codecov.io/gh/oliviertassinari/react-swipeable-views/branch/master)## Documentation
### Get started
- [Installation](https://react-swipeable-views.com/getting-started/installation/)
- [Usage](https://react-swipeable-views.com/getting-started/usage/)
- [Example projects](https://react-swipeable-views.com/getting-started/example-projects/)
- [Supported projects](https://react-swipeable-views.com/getting-started/example-projects/)
### Component API
- [Component API](https://react-swipeable-views.com/api/api/)
### More
- [Supported projects](https://react-swipeable-views.com/getting-started/example-projects/)
- [Demos](https://react-swipeable-views.com/demos/demos/)## Installation
### Browser
```sh
npm install --save react-swipeable-views
```### Native (experimental)
```sh
npm install --save react-swipeable-views-native
```## The problem solved
Check out the [demos](https://react-swipeable-views.com/demos/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](/static/usage.gif)
### Browser
```jsx
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 = () => (
slide n°1
slide n°2
slide n°3
);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.```jsx
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 = () => (
slide n°1
slide n°2
slide n°3
);export default MyComponent;
```## Who's using react-swipeable-views?
- [Doctolib](https://github.com/doctolib)
- [mastodon](https://github.com/tootsuite/mastodon)
- [Material-UI](https://github.com/mui-org/material-ui)
- [Tinder](https://tinder.com)
- [Uber](https://www.uber.com)
- Are you using this library? Add your company or project.## License
This project is licensed under the terms of the
[MIT license](https://github.com/oliviertassinari/react-swipeable-views/blob/master/LICENSE).