simple-scratch-card

Installation

npm install simple-scratch-card --save

Description

It is a modified version of the lesca-react-scratch-card. I need some extra features in that. So I created a simple-scratch-card. And a lot of thanks to lesca-react-scratch-card 🥳🎉.

What is fixed?

1. Now its working on firefox.
2. Bug in opacity of the card was fixed.
3. Scratch not working while scrolling the parent div was fixed.

Requirement

Use react v18+.

Usage

Import the package

import ScratchCard from 'simple-scratch-card';
import Image from './img/cover.jpg';

In the compnenet

const component = () => {
  return (
    <ScratchCard
      cover={Image}
      percent={50}
      width={100}
      height={100}
      onComplete={() => {
        // Some code here
      }}
    >
      Your card content
    </ScratchCard>
  );
};

Development

Props

Props	description	default
cover:string	scratch card cover image
width:number	card width	320
height:number	card height	240
percent:number	how much percent to complete it?	50
onComplete:function	callback when complete