Design a Flip Card Effect using ReactJS

In this article, 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 other for the back of the card. Moreover, it provides a prop isFlipped which can be used to show 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

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

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: