Design a Flip Card Effect using ReactJS
Design a Flip Card Effect using ReactJS refers to adding flip animations to the react component. The flip card effect is where a card flips to reveal its backside when clicked or hovered over.
Prerequisites
Table of Content
- Using CSS styling
- Using react-card-flip package
Steps to create React Application
Step 1: Create a React application using the following command:
npx create-react-app demo
Step 2: After creating your project folder i.e. demo, move to it using the following command:
cd demo
Project Structure:
Approach 1: Using CSS styling
To design a flip card Effect using react JS we will create the card component with its front and back content and a flip button. When the button is clicked it switch between the card front and back content alogn with a transformed or flip effect as added in the css file.
Example: Created a horontal flip card effect with front and back content and a flip button.
Javascript
// Filename - App.js import React, { useState } from "react" ; import "./App.css" ; const App = () => { const cardFront = "Welcome to GFG." ; const cardBack = "Computer Science Portal." ; const [isFlipped, setFlipped] = useState( false ); const handleFlip = () => { setFlipped(!isFlipped); }; return ( <div className= "App" > <h1 className= "Beginner" >w3wiki</h1> <h3>React Example for Flip Card Effect</h3> <div className= "container" > <div className={`flip-card ${ isFlipped ? "flipped" : "" }`} > <div className= "flip-card-inner" > <div className= "flip-card-front" > <div className= "card-content" > {cardFront} </div> <button className= "flip-button" onClick={handleFlip} > Flip </button> </div> <div className= "flip-card-back" > <div className= "card-content" > {cardBack} </div> <button className= "flip-button" onClick={handleFlip} > Flip </button> </div> </div> </div> </div> </div> ); }; export default App; |
CSS
/* Filename - App.css */ .App { text-align : center ; margin : auto ; width : 50 rem; /* justify-content: center; */ } .Beginner { color : green ; } .container { display : flex; justify- content : center ; margin : auto ; } .flip-card { perspective: 1000px ; width : 200px ; height : 300px ; position : relative ; transform-style: preserve -3 d; transition: transform 0.5 s; } .flip-card.flipped { transform: rotateY( 180 deg); } .flip-card-inner { width : 100% ; height : 100% ; transform-style: preserve -3 d; } .flip-card-front, .flip-card-back { width : 100% ; height : 100% ; position : absolute ; backface- visibility : hidden ; } .flip-card-front { background-color : #d7fbda ; color : green ; } .flip-card-back { background-color : #fbd7f8 ; color : blue ; transform: rotateY( 180 deg); } .card-content { padding : 20px ; text-align : center ; } .flip-button { width : 100px ; padding : 10px ; font-size : 16px ; margin-top : 10px ; background-color : #f5d9fa ; border : none ; border-radius: 5px ; cursor : pointer ; } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Approach 2: Using react-card-flip package
To flip a card, we will use React Flip Card which allows the flip card animations. It provides two child components, one for the front and the other for the back of the card. Moreover, it provides a prop isFlipped which can be used to show the front or back of the card.
Step to install: Install react-card-flip from npm.
npm i react-card-flip
depedencies list after installing packages
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-card-flip": "^1.2.2",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}
Example: The below example will illustrate the working of flipping a card.
Javascript
import React, { useState } from "react" ; import ReactCardFlip from "react-card-flip" ; function App() { const [flip, setFlip] = useState( false ); return ( <ReactCardFlip isFlipped={flip} flipDirection= "vertical" > <div style={{ width: '300px' , height: '200px' , background: '#d7fbda' , fontSize: '40px' , color: 'green' , margin: '20px' , borderRadius: '4px' , textAlign: 'center' , padding: '20px' }}> Welcome to GFG. <br /> <br /> <button style={{ width: '150px' , padding: '10px' , fontSize: '20px' , background: '#f5d9fa' , fontWeight: 'bold' , borderRadius: '5px' }} onClick={() => setFlip(!flip)}> Flip</button> </div> <div style={{ width: '300px' , height: '200px' , background: '#fbd7f8' , fontSize: '40px' , color: 'blue' , margin: '20px' , borderRadius: '4px' , textAlign: 'center' , padding: '20px' }}> Computer Science Portal. <br /> <button style={{ width: '150px' , padding: '10px' , fontSize: '20px' , background: '#f5d9fa' , fontWeight: 'bold' , borderRadius: '5px' }} onClick={() => setFlip(!flip)}> Flip</button> </div> </ReactCardFlip> ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: