Why use it?

a scratch card component use react v18+.

#### Live Demo

Installation

``sh
npm install lesca-react-scratch-card --save
`

Usage

As a Node module:

`javascript
import ScratchCard from 'lesca-react-scratch-card';
import Image from './img/cover.jpg';
`

In the compnenet

`javascript
const component = () => {
return (
cover={Image}
percent={50}
width={100}
height={100}
brushSize={{ width: 50, height: 50 }}
onComplete={() => {
// ...script
}}
>
your card content

);
};
``

Development

$3

| 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 | |
| brushSize:_Object_ | brush size | {width:50, height:50} |

$3

- Code Linting ([eslint])
- maintain if necessary

[ci-badge]: https://github.com/executablebooks/markdown-it-plugin-template/workflows/CI/badge.svg
[ci-link]: https://github.com/executablebooks/markdown-it--plugin-template/actions
[npm-badge]: https://img.shields.io/npm/v/markdown-it-plugin-template.svg
[npm-link]: https://www.npmjs.com/package/markdown-it-plugin-template
[github actions]: https://docs.github.com/en/actions
[github pages]: https://docs.github.com/en/pages
[prettier]: https://prettier.io/
[eslint]: https://eslint.org/
[jest]: https://facebook.github.io/jest/
[rollup]: https://rollupjs.org
[npm]: https://www.npmjs.com
[unpkg]: https://unpkg.com/