{"id":13421969,"url":"https://github.com/oliviertassinari/react-swipeable-views","last_synced_at":"2025-05-11T16:33:36.191Z","repository":{"id":37445324,"uuid":"42942933","full_name":"oliviertassinari/react-swipeable-views","owner":"oliviertassinari","description":"A React component for swipeable views. :snowflake:","archived":false,"fork":false,"pushed_at":"2024-05-07T12:35:10.000Z","size":4377,"stargazers_count":4474,"open_issues_count":84,"forks_count":483,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-05-10T02:43:30.447Z","etag":null,"topics":["component","react","react-native","swipe","swipeable"],"latest_commit_sha":null,"homepage":"https://react-swipeable-views.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oliviertassinari.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-09-22T15:32:21.000Z","updated_at":"2025-05-05T12:01:13.000Z","dependencies_parsed_at":"2024-02-04T16:19:38.116Z","dependency_job_id":"bfdada5e-7553-4f82-bf26-ba265c3fa7b9","html_url":"https://github.com/oliviertassinari/react-swipeable-views","commit_stats":{"total_commits":539,"total_committers":70,"mean_commits":7.7,"dds":"0.26530612244897955","last_synced_commit":"be57b7d9ba34c349a725b5ce9c0b265e0a9a9c18"},"previous_names":[],"tags_count":93,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliviertassinari%2Freact-swipeable-views","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliviertassinari%2Freact-swipeable-views/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliviertassinari%2Freact-swipeable-views/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oliviertassinari%2Freact-swipeable-views/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oliviertassinari","download_url":"https://codeload.github.com/oliviertassinari/react-swipeable-views/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253427794,"owners_count":21906789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","react","react-native","swipe","swipeable"],"created_at":"2024-07-30T23:00:34.738Z","updated_at":"2025-05-11T16:33:36.168Z","avatar_url":"https://github.com/oliviertassinari.png","language":"JavaScript","funding_links":["https://www.paypal.me/oliviertassinari/10"],"categories":["UI Components","JavaScript","🌐 Web Development - Frontend","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["UI Navigation","Navigation"],"readme":"# react-swipeable-views\n\n\u003e A React component for swipeable views.\n\n| Package | Version | Download | Size (kB gzipped) |\n|---------|:--------|:---------|:------------------|\n| 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 |\n| 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 |\n| 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) | ? |\n\n[![Build Status](https://travis-ci.org/oliviertassinari/react-swipeable-views.svg?branch=master)](https://travis-ci.org/oliviertassinari/react-swipeable-views)\n[![Dependencies](https://img.shields.io/david/oliviertassinari/react-swipeable-views.svg)](https://david-dm.org/oliviertassinari/react-swipeable-views)\n[![DevDependencies](https://img.shields.io/david/dev/oliviertassinari/react-swipeable-views.svg)](https://david-dm.org/oliviertassinari/react-swipeable-views#info=devDependencies\u0026view=list)\n[![Donate](https://img.shields.io/badge/$-support-green.svg)](https://www.paypal.me/oliviertassinari/10)\n[![TypeScript definitions on DefinitelyTyped](https://img.shields.io/badge/style-.d.ts-green.svg?style=flat\u0026label=DefinitelyTyped)](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-swipeable-views)\n[![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)\n\n## Documentation\n### Get started\n- [Installation](https://react-swipeable-views.com/getting-started/installation/)\n- [Usage](https://react-swipeable-views.com/getting-started/usage/)\n- [Example projects](https://react-swipeable-views.com/getting-started/example-projects/)\n- [Supported projects](https://react-swipeable-views.com/getting-started/example-projects/)\n### Component API\n- [Component API](https://react-swipeable-views.com/api/api/)\n### More\n- [Supported projects](https://react-swipeable-views.com/getting-started/example-projects/)\n- [Demos](https://react-swipeable-views.com/demos/demos/)\n\n## Installation\n\n### Browser\n\n```sh\nnpm install --save react-swipeable-views\n```\n\n### Native (experimental)\n\n```sh\nnpm install --save react-swipeable-views-native\n```\n\n## The problem solved\n\nCheck out the [demos](https://react-swipeable-views.com/demos/demos/) from a mobile device (real or emulated).\nIt's tiny (\u003c10 kB gzipped), it quickly renders the first slide, then lazy-loads the others.\n\n## Simple example\n\n![usage](/static/usage.gif)\n\n### Browser\n\n```jsx\nimport React from 'react';\nimport SwipeableViews from 'react-swipeable-views';\n\nconst styles = {\n  slide: {\n    padding: 15,\n    minHeight: 100,\n    color: '#fff',\n  },\n  slide1: {\n    background: '#FEA900',\n  },\n  slide2: {\n    background: '#B3DC4A',\n  },\n  slide3: {\n    background: '#6AC0FF',\n  },\n};\n\nconst MyComponent = () =\u003e (\n  \u003cSwipeableViews\u003e\n    \u003cdiv style={Object.assign({}, styles.slide, styles.slide1)}\u003e\n      slide n°1\n    \u003c/div\u003e\n    \u003cdiv style={Object.assign({}, styles.slide, styles.slide2)}\u003e\n      slide n°2\n    \u003c/div\u003e\n    \u003cdiv style={Object.assign({}, styles.slide, styles.slide3)}\u003e\n      slide n°3\n    \u003c/div\u003e\n  \u003c/SwipeableViews\u003e\n);\n\nexport default MyComponent;\n```\n\n### Native (experimental)\n\nreact-native support is experimental and I have no plan pushing it forward.\nI start to think that lower level abstraction to share the implementation between the platforms are more appropriate.\nWe have two different implementations of the react-swipeable-views API.\n\n```jsx\nimport React from 'react';\nimport {\n  StyleSheet,\n  Text,\n  View,\n} from 'react-native';\n\nimport SwipeableViews from 'react-swipeable-views-native';\n// There is another version using the scroll component instead of animated.\n// I'm unsure which one give the best UX. Please give us some feedback.\n// import SwipeableViews from 'react-swipeable-views-native/lib/SwipeableViews.scroll';\n\nconst styles = StyleSheet.create({\n  slideContainer: {\n    height: 100,\n  },\n  slide: {\n    padding: 15,\n    height: 100,\n  },\n  slide1: {\n    backgroundColor: '#FEA900',\n  },\n  slide2: {\n    backgroundColor: '#B3DC4A',\n  },\n  slide3: {\n    backgroundColor: '#6AC0FF',\n  },\n  text: {\n    color: '#fff',\n    fontSize: 16,\n  },\n});\n\nconst MyComponent = () =\u003e (\n  \u003cSwipeableViews style={styles.slideContainer}\u003e\n    \u003cView style={[styles.slide, styles.slide1]}\u003e\n      \u003cText style={styles.text}\u003e\n        slide n°1\n      \u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={[styles.slide, styles.slide2]}\u003e\n      \u003cText style={styles.text}\u003e\n        slide n°2\n      \u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={[styles.slide, styles.slide3]}\u003e\n      \u003cText style={styles.text}\u003e\n        slide n°3\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  \u003c/SwipeableViews\u003e\n);\n\nexport default MyComponent;\n```\n\n## Who's using react-swipeable-views?\n\n- [Doctolib](https://github.com/doctolib)\n- [mastodon](https://github.com/tootsuite/mastodon)\n- [Material-UI](https://github.com/mui-org/material-ui)\n- [Tinder](https://tinder.com)\n- [Uber](https://www.uber.com)\n- Are you using this library? Add your company or project.\n\n## License\n\nThis project is licensed under the terms of the\n[MIT license](https://github.com/oliviertassinari/react-swipeable-views/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foliviertassinari%2Freact-swipeable-views","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foliviertassinari%2Freact-swipeable-views","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foliviertassinari%2Freact-swipeable-views/lists"}