Do you want to create a flip card effect in ReactJS? Here’s how to do it easily using this library
react-card-flip
React-card-flip is an easy-to-use library to create a card flip effect. Let’s try it out!
Installation
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:
Usage
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">
<Card>
<div style={{marginBottom: 15}}>This is the front of the card.</div>
<button onClick={flipCard}>Click to flip</button>
</Card>
<Card>
<div style={{marginBottom: 15}}>
This is the back of the card.
</div>
<button onClick={flipCard}>Click to flip</button>
</Card>
</ReactCardFlip>
That’s it, You have a fully working flip effect! Here’s how it looks:
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 – https://codesandbox.io/s/snowy-https-7r54cp
Go flip it!
Also read, Creating Engaging 3D Tilt Effects with vanilla-tilt.js
- Flutter lookup failed in @fields error (solved) - July 14, 2023
- Free open source alternative to Notion along with AI - July 13, 2023
- Threads API for developers for programmatic access - July 12, 2023