Why use it?

a scratch card component use react v18+.

Live Demo

Installation

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

Usage

As a Node module:

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

In the compnenet

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

Development

Props

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

Features

• Code Linting (eslint)
• maintain if necessary