JSPM – scratch-win-react@1.0.3

Package Exports

scratch-win-react
scratch-win-react/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (scratch-win-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

👆 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"}

scratch-win-react