In web development, creating interactive and engaging user interfaces is crucial to enhance the user experience. One popular technique to achieve this is the flip card effect, where a card flips to reveal its backside when clicked or hovered over. In this article, we will explore how to design a flip card effect using ReactJS, a popular JavaScript library for building user interfaces.
Let’s see how we can flip the cards using the React Card Flip which allows the card-flipping animation in the ReactJS application.
Approach: 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.
Below is the step-by-step implementation of the above approach:
Modules Required:
- npm
- create-react-application
Creating React Application And Installing Module:
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
Step 3: Install react-card-flip from npm.
npm i react-card-flip
Open the src folder and delete the following files:
- logo.svg
- setupTests.js
- App.test.js
- index.css
- reportWebVitals.js
- App.css
Project Structure: The project should look like this:
Example: The below example will illustrate the working of flipping a card:
index.js
Javascript
import React from 'react';import ReactDOM from 'react-dom/client';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( <React.StrictMode> <App /> </React.StrictMode>); |
App.js
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:
