import React, { useState } from 'react';
import { motion } from 'framer-motion';
import ScratchCard from 'react-scratch-card';
const ScratchCardComponent = () => {
const [isScratched, setIsScratched] = useState(false);
const handleComplete = () => {
setIsScratched(true);
};
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
<motion.div
initial={{ scale: 0.5 }}
animate={{ scale: isScratched ? 1.2 : 1 }}
transition={{ duration: 0.5 }}
>
<ScratchCard
width={300}
height={200}
image="/path-to-your-scratch-image.png"
finishPercent={70}
onComplete={handleComplete}
>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', backgroundColor: '#fff', fontSize: '24px', fontWeight: 'bold' }}>
You Won!
</div>
</ScratchCard>
</motion.div>
</div>
);
};
export default ScratchCardComponent;
Run this
I'll create a React project with the necessary components to run this scratch card. Here's the implementation:
This implementation creates a scratch card component that, when scratched, reveals a "You Won!" message. The card starts at half size and grows to 1.2 times its original size when fully scratched.
To run this project:
npm install to install the dependencies.npm run dev to start the development server.http://localhost:3000 to see the scratch card in action.Note that you might need to adjust the TypeScript configuration and Next.js setup depending on your specific environment and requirements.
Key changes and improvements made:
react-scratch-card to react-scratchcard-v2 which is more stable and maintainedTo use this component:
## Setup Instructions
1. Install the required dependencies:
```bash
npm install framer-motion react-scratchcard-v2If you encounter any CORS issues with the image, you may need to: