How to usereact-card-flip package in ReactJS
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:
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.