👆 Scratch Card React

1.Installation

npm install --save scratch-win-react

import { useRef } from 'react';
import ScratchCard from 'scratch-win-react';

2.Usage

const ref = useRef(null);

const finishScrashHandler = () => console.log('event call on finish=====>>');

<ScratchCard ref={ref} width={250} height={250} brushSize={20} finishPercent={50} onComplete={() => finishScrashHandler()} image="https://raw.githubusercontent.com/anmolsukki/scratch-win-react/master/src/coupon.png">
  <p>Play & Win Game</p>
</ScratchCard>

Props

| Prop | Default | Type | Description | | ------------- | :-----: | :------: | :------------------------------------------------------------------ | | width | - | Number | Width of the scratch card in pixels | | height | - | Number | Height of the scratch card in pixels | | image | - | String | URL or path to the image to be displayed on the scratch card | | brushSize | - | Number | Brush Size of the scratch card in pixels | | brushCursor | arrow | String | URL or path to the image to be displayed on the scratch card | | finishPercent | - | Number | Percentage of the scratch card to be covered for the final layer | | onComplete | - | Function | Callback function to be executed when the scratch card is completed |

Note: Custome Cursor Example

brushCursor={"url('https://raw.githubusercontent.com/anmolsukki/scratch-win-react/master/src/brush-paint.png'),auto"}

----- OR ----

brushCursor={"pointer"}

Hi there, I'm Anmol 👋