scratchie-effect v0.1.2

Scratch Card Effect

Overview

This project is a customizable scratch card effect built with React and TypeScript. It allows users to create interactive scratch-off cards with various customization options such as overlays, completion callbacks, and card shapes.

Features

• Custom Scratch Overlay: Use an image or url as the scratch-off layer.
• OnComplete Callback: Trigger a function when a certain percentage of the layer is scratched off.
• Custom Card Shapes: Define unique shapes for the scratch card.
• Brush Customization: Adjust the size and appearance of the brush used for scratching.
• Responsive & Mobile-Friendly: Works seamlessly on both desktop and mobile devices.

Installation

Clone the repository and install dependencies:

git clone https://github.com/vth20/scratch-effect.git
cd scratch-effect
npm install
npm start

Usage

Import and use the Scratch component in your React application:

import Scratch from "./components/Scratch";

const App = () => {
  const handleComplete = () => {
    console.log("Scratch card fully revealed!");
  };

  return (
    <Scratch
      content={<div>Congratulations! You won!</div>}
      layer="/path-to-overlay-image.png or image's url"
      onComplete={handleComplete}
      style={{ width: 300, height: 200 }}
    />
  );
};

export default App;

Props

Props

Customization

Adjusting Scratch Completion Threshold

You can define a specific percentage of scratching required before triggering onComplete:

<Scratch onComplete={() => {
  console.log("Completed")
}} />

Demo

Author

Developed by @vth20