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

• React JS
• Node.js & NPM

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="geeks">GeeksforGeeks</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: 50rem;
    /* justify-content: center; */
}

.geeks {
    color: green;
}

.container {
    display: flex;
    justify-content: center;

    margin: auto;
}

.flip-card {
    perspective: 1000px;
    width: 200px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.flip-card.flipped {
    transform: rotateY(180deg);
}

.flip-card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.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(180deg);
}

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