How to create a card flip effect in React?

Do you want to create a flip card effect in ReactJS? Here’s how to do it easily using this library

Card flip effect in ReactJS


React-card-flip is an easy-to-use library to create a card flip effect. Let’s try it out!


To use react-card-flip, install it from NPM with npm using the command:

npm install --save react-card-flip

If you are using Yarn then install it from npm using the command:

install it from NPM with yarn using the command:


Import the ReactCardFlip component first

import ReactCardFlip from 'react-card-flip';

Provide the component with 2 children. The first child would be the front part and the second child would be the back part.

Create a property to hold the flip state of the card.

const [isFlipped, setIsFlipped] = useState(false);

Pass a property named ‘isFlipped’ to the ReactCardFlip component and a function to toggle the isFlipped state value. It would look something like this:

<ReactCardFlip isFlipped={isFlipped} flipDirection="vertical">
          <div style={{marginBottom: 15}}>This is the front of the card.</div>
          <button onClick={flipCard}>Click to flip</button>
        <div style={{marginBottom: 15}}>
          This is the back of the card.
          <button onClick={flipCard}>Click to flip</button>

That’s it, You have a fully working flip effect! Here’s how it looks:

Card flip effect in ReactJS

Free source code

Here’s the source code of the complete example for you to run it live and use it in your apps.

The full demo is embedded below and here’s the link to source code –

Go flip it!

Also read, Creating Engaging 3D Tilt Effects with vanilla-tilt.js

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments