{"id":17025856,"url":"https://github.com/3DJakob/react-tinder-card","last_synced_at":"2026-04-11T22:30:17.534Z","repository":{"id":38145798,"uuid":"225916691","full_name":"3DJakob/react-tinder-card","owner":"3DJakob","description":"A npm react module for making react elements swipeable like in the dating app tinder.","archived":false,"fork":false,"pushed_at":"2024-03-06T11:36:08.000Z","size":34634,"stargazers_count":325,"open_issues_count":31,"forks_count":109,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-14T08:37:19.586Z","etag":null,"topics":["hacktoberfest","native","react","react-native","swipe","swipeable-elements","tinder"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-tinder-card","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/3DJakob.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2019-12-04T17:02:24.000Z","updated_at":"2024-06-18T13:17:25.561Z","dependencies_parsed_at":"2024-06-18T13:17:24.684Z","dependency_job_id":"d0a9ef40-c871-43a5-9638-047801ff5f4a","html_url":"https://github.com/3DJakob/react-tinder-card","commit_stats":{"total_commits":107,"total_committers":11,"mean_commits":9.727272727272727,"dds":"0.25233644859813087","last_synced_commit":"b6125689aa9d098f23f7b44b7fb17e489c8dabbe"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3DJakob%2Freact-tinder-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3DJakob%2Freact-tinder-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3DJakob%2Freact-tinder-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3DJakob%2Freact-tinder-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3DJakob","download_url":"https://codeload.github.com/3DJakob/react-tinder-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239988393,"owners_count":19729986,"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":["hacktoberfest","native","react","react-native","swipe","swipeable-elements","tinder"],"created_at":"2024-10-14T07:30:05.325Z","updated_at":"2026-04-11T22:30:17.450Z","avatar_url":"https://github.com/3DJakob.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Tinder Card\n\nA react component to make swipeable elements like in the app tinder.\n\n## Compatibility\n- React\n- React Native\n\nThe installation, import and api is identical for both Web and Native.\n\n## Demo\n![](demo.gif)\n\nTry out the interactive demo \u003ca href=\"https://3djakob.github.io/react-tinder-card-demo/\"\u003ehere.\u003c/a\u003e\n\nCheck out the Web demo repo \u003ca href=\"https://github.com/3DJakob/react-tinder-card-demo\"\u003ehere.\u003c/a\u003e\n\nCheck out the Native demo repo \u003ca href=\"https://github.com/3DJakob/react-native-tinder-card-demo\"\u003ehere.\u003c/a\u003e\n\n## Contributing\nWant to contribute? Check out the [contributing.md](https://github.com/3DJakob/react-tinder-card/blob/master/CONTRIBUTING.md).\n\n## Installation\n\n```sh\nnpm install --save react-tinder-card\n```\n\n### React\nIf you are using React you will also need spring/web\n```sh\nnpm install --save @react-spring/web@9.5.5\n```\n\n### React Native\nIf you are using React Native you will also need spring/native\n```sh\nnpm install --save @react-spring/native@9.5.5\n```\n\n## Usage\n\nImport TinderCard and use the component like the snippet. Note that the component will not remove itself after swipe. If you want that behaviour implement that on the `onCardLeftScreen` callback. It is recommended to have `overflow: hidden` on your `#root` to prevent cards from being visible after they go of screen.\n\n```js\nimport TinderCard from 'react-tinder-card'\n\n// ...\n\nconst onSwipe = (direction) =\u003e {\n  console.log('You swiped: ' + direction)\n}\n\nconst onCardLeftScreen = (myIdentifier) =\u003e {\n  console.log(myIdentifier + ' left the screen')\n}\n\nreturn (\n  \u003cTinderCard onSwipe={onSwipe} onCardLeftScreen={() =\u003e onCardLeftScreen('fooBar')} preventSwipe={['right', 'left']}\u003eHello, World!\u003c/TinderCard\u003e\n)\n```\n\nIf you want more usage help check out the demo repository code: [Web](https://github.com/3DJakob/react-tinder-card-demo/tree/master/src/examples) / [Native](https://github.com/3DJakob/react-native-tinder-card-demo/tree/master/src/examples)\n\nThe simple example is the minimum code needed to get you started.\n\nThe advanced example implements a state to dynamically remove swiped elements as well as using buttons to trigger swipes.\n\nBoth Web code examples can be tested on the [demo page.](https://3djakob.github.io/react-tinder-card-demo/) The Native code examples can be cloned and runned using `expo start`.\n\n## Buttons inside a TinderCard\n\nIf you want a pressable element inside a TinderCard you will need to add  `className=\"pressable\"` for it to work properly on mobile. This is because touchstart events are normally prevent defaulted to avoid scrolling the page when dragging cards around.\n\n## Props\n\n### `flickOnSwipe`\n\n- optional\n- type: `boolean`\n- default: `true`\n\nWhether or not to let the element be flicked away off-screen after a swipe.\n\n### `onSwipe`\n\n- optional\n- type: `SwipeHandler`\n\nCallback that will be executed when a swipe has been completed. It will be called with a single string denoting which direction the swipe was in: `'left'`, `'right'`, `'up'` or `'down'`.\n\n### `onCardLeftScreen`\n\n- optional\n- type: `CardLeftScreenHandler`\n\nCallback that will be executed when a `TinderCard` has left the screen. It will be called with a single string denoting which direction the swipe was in: `'left'`, `'right'`, `'up'` or `'down'`.\n\n### `preventSwipe`\n\n- optional\n- type: `Array\u003cstring\u003e`\n- default: `[]`\n\nAn array of directions for which to prevent swiping out of screen. Valid arguments are `'left'`, `'right'`, `'up'` and `'down'`.\n\n### `swipeRequirementType`\n\n- optional\n- type: `'velocity' | 'position'`\n- default: `'velocity'`\n\nWhat method to evaluate what direction to throw the card on release. 'velocity' will evaluate direction based on the direction of the swiping movement. 'position' will evaluate direction based on the position the card has on the screen like in the app tinder.\nIf set to position it is recommended to manually set swipeThreshold based on the screen size as not all devices will accommodate the default distance of 300px and the default native swipeThreshold is 1px which most likely is undesirably low.\n\n### `swipeThreshold`\n\n- optional\n- type: `number`\n- default: `300`\n\nThe threshold of which to accept swipes. If swipeRequirementType is set to velocity it is the velocity threshold and if set to position it is the position threshold.\nOn native the default value is 1 as the physics works differently there.\nIf swipeRequirementType is set to position it is recommended to set this based on the screen width so cards can be swiped on all screen sizes.\n\n### `onSwipeRequirementFulfilled`\n\n- optional\n- type: `SwipeRequirementFufillUpdate`\n\nCallback that will be executed when a `TinderCard` has fulfilled the requirement necessary to be swiped in a direction on release. This in combination with `onSwipeRequirementUnfulfilled` is useful for displaying user feedback on the card. When using this it is recommended to use `swipeRequirementType='position'` as this will fire a lot otherwise.\nIt will be called with a single string denoting which direction the user is swiping: `'left'`, `'right'`, `'up'` or `'down'`.\n\n### `onSwipeRequirementUnfulfilled`\n\n- optional\n- type: `SwipeRequirementUnfufillUpdate`\n\nCallback that will be executed when a `TinderCard` has unfulfilled the requirement necessary to be swiped in a direction on release.\n\n### `className`\n\n- optional\n- type: `string`\n\nHTML attribute class\n\n### `children`\n\n- optional\n- type: `React.ReactNode`\n\nThe children passed in is what will be rendered as the actual Tinder-style card.\n\n## API\n\n### `swipe([dir])`\n\n- `dir` (`Direction`, optional) - The direction in which the card should be swiped. One of: `'left'`, `'right'`, `'up'` and `'down'`.\n- returns `Promise\u003cvoid\u003e`\n\nProgrammatically trigger a swipe of the card in one of the valid directions `'left'`, `'right'`, `'up'` and `'down'`. This function, `swipe`, can be called on a reference of the TinderCard instance. Check the [example](https://github.com/3DJakob/react-tinder-card-demo/blob/master/src/examples/Advanced.js) code for more details on how to use this.\n\n### `restoreCard()`\n\n- returns `Promise\u003cvoid\u003e`\n\nRestore swiped-card state. Use this function if you want to undo a swiped-card (e.g. you have a back button that shows last swiped card or you have a reset button. The promise is resolved once the card is returned\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3DJakob%2Freact-tinder-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3DJakob%2Freact-tinder-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3DJakob%2Freact-tinder-card/lists"}