How to integrate flip cards into React app

Like any developer, I always try to add interesting animations to my projects. With React.js it can be very easy.

I want to add into my project flip cards animation.

And I want to show you how to do that based on my project “Rise and Shine”.

The main page of project looks like:

And I want to flip cards, when I click on button “Click to flip”.

Let’s do it:

1. Install “react-card-flip” library. In your terminal run (make sure that you are in the right folder):

npm install — save react-card-flip

2. Then import this library into your component where you want to use it:

3. Then you should to create a function, which will control this action. In my case there is a functional component, and I need to set state, that will allows me to control flipping cards. So for set state I used hooks useState.

4. After this I set the ReactCadrFlip component and inside this component I created two different div: one for the front side and one for the back side:

5. Inside each div I created a button on click which calls our controlling action HandleClick. So, that it. Very easy, so when I click on button “Click to flip” I can see the other side of my cards:

And it works to each card.