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 | |