react-card-flip
react-card-flip copied to clipboard
example using the State Hook no readme :)
import { useState } from 'react'; import ReactCardFlip from 'react-card-flip';
const Card = () => { const [isFlipped, setIsFlipped] = useState(false)
function handleClick(e) { e.preventDefault(); setIsFlipped(!isFlipped); }
return ( <> <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal"> <YOUR_FRONT_CCOMPONENT> This is the front of the card. <button onClick={handleClick}>Click to flip </YOUR_FRONT_CCOMPONENT>
<YOUR_BACK_COMPONENT>
This is the back of the card.
<button onClick={handleClick}>Click to flip</button>
</YOUR_BACK_COMPONENT>
</ReactCardFlip>
</>
) }
export default Card;