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