Design a Flip Card Effect using ReactJS

Last Updated : 30 Jul, 2024

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

Approach 1: Using CSS styling
Approach 2: 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.

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;
}

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;

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:

Animated expanding card using framer-motion and ReactJS

tejaswaniagrawal23

Improve

Article Tags :

Design a Flip Card Effect using ReactJS

Prerequisites

Steps to create React Application

Project Structure:

Approach 1: Using CSS styling

Approach 2: Using react-card-flip package

Similar Reads

Thank You!

What kind of Experience do you want to share?