Posts

Showing posts from January, 2021

How to create Tinder Cards in ReactJs

Image
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  Now create tinder cards in the app.js file 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 className: Default prop which every component has. preventSwipe   : As Tinder Card provides swipe functionality in all four directi