anmolsukki/scratch-win-react

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