1.0.3 • Published 2 years ago
scratch-win-react v1.0.3
👆 Scratch Card React
1.Installation
npm install --save scratch-win-reactimport { 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 👋
