ScratchCard Component

The ScratchCard component for React provides an interactive scratch-off effect that reveals content underneath a scratchable surface. It's ideal for creating engaging experiences like scratch-off cards for promotions, games, or revealing hidden messages.

Features

• Customizable Dimensions: Set the width and height of the scratch card.
• Background Image Support: Optionally include a background image that appears as the scratchable surface.
• Dynamic Children Rendering: Render custom React components or HTML elements beneath the scratchable surface.
• Custom Brush Size: Adjust the size of the scratching brush.
• Completion Callback: A callback function that triggers when a certain percentage of the surface has been scratched off.
• Cross-Origin Image Support: Handles CORS policy for images.

Installation

1npm i next-scratchcard

or

1yarn add next-scratchcard

Usage

Here's a basic example of how to use the ScratchCard component:

1import { ScratchCard } from 'next-scratchcard';
2
3function App() {
4  const handleComplete = () => {
5    console.log('Scratch card completed!');
6  };
7
8  return (
9    <ScratchCard finishPercent={30} brushSize={20} onComplete={handleComplete}>
10      <img
11        height={150}
12        width={300}
13        src="https://images.pexels.com/photos/14686115/pexels-photo-14686115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
14      />
15    </ScratchCard>
16  );
17}