next-scratchcard
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

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

npm i next-scratchcard

or

yarn add next-scratchcard

Usage

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

import { ScratchCard } from 'next-scratchcard';

function App() {
  const handleComplete = () => {
    console.log('Scratch card completed!');
  };

  return (
    <ScratchCard finishPercent={30} brushSize={20} onComplete={handleComplete}>
      <img
        height={150}
        width={300}
        src="https://images.pexels.com/photos/14686115/pexels-photo-14686115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      />
    </ScratchCard>
  );
}

/next-scratchcard/

    Package Sidebar

    Install

    npm i next-scratchcard

    Weekly Downloads

    209

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    54.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • madhavb230100
    • ankit-tailor