How to create Tinder Cards in ReactJs

The app has created a sensation using its card and swipe functionality. Many of us try to create tinder cards and swipe effects and end up writing a lot of code. This problem is solved by ReactJs (one of the most popular library trending now). 

In this article, we will work with the react package which allows us to create tinder cards with swipe functionality 

Command to install package is: 

        npm install react-tinder-card 

Let's start by creating a react app

npx create-react-app tinder-cards

cd tinder-cards

npm install react-tinder-card

npm start 

 

Once the react app is up and running, we can create a data file to be rendered in tinder cards.

data.js 

	const data = [
	{
	name : "Tiger",
	category : "Tiger",
	imgURL : 'https://images.unsplash.com/photo-1477764250597-dffe9f601ae8?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80'
	},
	{
	name : "Leopard",
	category : "Leopard",
	imgURL : 'https://images.unsplash.com/photo-1456926631375-92c8ce872def?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80'
	},
	{
	name : "Bird",
	category : "Bird",
	imgURL : 'https://images.unsplash.com/photo-1444464666168-49d633b86797?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=749&q=80'
	},
	{
	name : "Bear",
	category : "Bear",
	imgURL : 'https://images.unsplash.com/photo-1525382455947-f319bc05fb35?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=514&q=80'
	},
	{
	name : "Wolf",
	category : "Wolf",
	imgURL : 'https://images.unsplash.com/photo-1474511320723-9a56873867b5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=752&q=80'
	},
	];
	export default data;

view raw data.js hosted with ❤ by GitHub

Now create tinder cards in the app.js file

	import {useState,useEffect} from 'react';
	import './App.css';
	import TinderCard from 'react-tinder-card'
	import data from './data.js'
	function App() {
	function swiped(direction){
	console.log(direction)
	}
	function leftScreen(name){
	console.log(name)
	}
	return (
	<div className="app">
	<h1>Tinder Cards</h1>
	<div className="container">
	<TinderCard
	className="swipe"
	preventSwipe = {['up','down']}
	onSwipe = {(direction) => swiped(direction)}
	onCardLeftScreen = {() => leftScreen("temp name")}
	>
	<div className="card"
	style ={{backgroundImage: `url(https://images.unsplash.com/photo-1477764250597-dffe9f601ae8?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80})`}}>
	<h3>Name</h3>
	</div>
	</TinderCard>
	</div>
	</div>
	);
	}
	export default App;

view raw app.js hosted with ❤ by GitHub

If we break down the code: 

First, we have to import a tinder card.

Now we can create a TinderCard component that contains props to be passed

1. className: Default prop which every component has.
2. preventSwipe : As Tinder Card provides swipe functionality in all four directions (left, right, up, down). If we want to block any direction we can just pass the array in these props. As we have passed ['up',' down'] which restricts the swipe in these two directions. It's an optional parameter
3. onSwipe : A callback function that will be executed when the card is swiped. It passes the direction in which the card was swiped in the argument. It is also an optional parameter. As in the above code swiped() is called on swiped and direction is passed in an argument which is then printed in console log as in output screen below.
4. onCardLeftScreen: A callback function executed which is executed when the card has left the screen. As in the above code leftScreen() is called on which card has left the screen and temporary output is printed in the console log.
5. In the End, elements are rendered in Tinder Card on which this functionality is to be applied.

Creating Tinder Cards based on data.js

Now we will import data using the useEffect() hook and will create Tinder Cards accordingly. 

Apart from static data, dynamic data from the database can also be fetched in useEffect() hook. 

	import {useState,useEffect} from 'react';
	import './App.css';
	import TinderCard from 'react-tinder-card'
	import data from './data.js'
	function App() {
	const [animals, setAnimals] = useState([])
	const [userLike, setUserLike] = useState([])
	const [userDisLike, setUserDisLike] = useState([])
	console.log(animals);
	useEffect(() => {
	setAnimals(data)
	return data
	},[])
	function swiped(direction,category){
	if(direction === 'right')
	setUserLike(userLike => [...userLike,category])
	else
	setUserDisLike(userDisLike => [...userDisLike,category])
	}
	function leftScreen(name){
	console.log(name)
	}
	console.log(userLike)
	console.log(userDisLike)
	return (
	<div className="app">
	<h1>Tinder Cards</h1>
	<div className="container">
	{animals.map((animal) => (
	<TinderCard
	key ={animal.name}
	className="swipe"
	//preventSwipe = {['up','down']}
	onSwipe = {(direction) => swiped(direction,animal.category)}
	onCardLeftScreen = {() => leftScreen(animal.name)}
	>
	<div className="card"
	style ={{backgroundImage: `url(${animal.imgURL})`}}>
	<h3>{animal.name}</h3>
	</div>
	</TinderCard>
	))}
	</div>
	</div>
	);
	}
	export default App;

view raw app.js hosted with ❤ by GitHub

Code Breakdown

1. useEffect hook is called at first and the state is updated with data fetched from the data.js file.Here data can be fetched from API also.
2. Here the preventSwipe is commented so Tinder Card can be swiped in all directions.
3. onSwipe: swiped function is called on a swipe of Tinder Card and direction is checked(left or right) and based on that it is checked whether the user liked the image or not and basis on that different states are updated using useState hook.

Conclusion

The simple React package allows us to create real-world functionality.

The two callback function allows us to write business logic about what should be done on different swipe direction.

The source code of this project can be found on this GitHub link.