kaustubhdhole / react-tinder-card

A npm react module for making react elements swipeable like in the dating app tinder.

React Tinder Card

A react component to make swipeable elements like in the app tinder.

Demo

Try out the interactive demo here.

Check out the demo repo here.

Installation

npm install --save react-tinder-card

Usage

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

If you want more usage help check out the demo repository code here.

import TinderCard from 'react-tinder-card'

// ...

const onSwipe = (direction) => {
  console.log('You swiped: ' + direction)
}

const onCardLeftScreen = (myIdentifier) => {
  console.log(myIdentifier + ' left the screen')
}

return (
  <TinderCard onSwipe={onSwipe} onCardLeftScreen={() => onCardLeftScreen('fooBar')} preventSwipe={['right', 'left']}>Hello, World!</TinderCard>
)

Props

flickOnSwipe

• optional
• type: boolean
• default: true

Whether or not to let the element be flicked away off-screen after a swipe.

onSwipe

• optional
• type: SwipeHandler

Callback 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'.

onCardLeftScreen

• optional
• type: CardLeftScreenHandler

Callback 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'.

preventSwipe

• optional
• type: Array<string>
• default: []

An array of directions for which to prevent swiping out of screen. Valid arguments are 'left', 'right', 'up' and 'down'.