React-scratchcard-v3 NPM

react-scratchcard-v3

A scratchcard component for React

Note

This is a clone of https://github.com/dopey2/react-scratchcard-v2

Improvement:

Added necessary precautions for 'Unable to preventDefault inside passive event listener' error

Demo

scratchcard-demo

Install

npm install --save react-scratchcard-v3

yarn add react-scratchcard-v3

Usage

import React, { useRef }  from 'react';
import ScratchCard from 'react-scratchcard-v3';

import * as IMG from './img.jpg';

const App = () => {
    
  const ref = useRef<ScratchCard>(null);

  const onClickReset = () => {
    ref.current && ref.current.reset();
  }

  return (
    <div>
      <button onClick={onClickReset}>Reset</button>
      <ScratchCard
        width={320}
        height={226}
        image={IMG}
        finishPercent={80}
        onComplete={() => console.log('complete')}
      >
        <div style={{
          display: 'flex',
          width: '100%',
          height: '100%',
          alignItems: 'center',
          justifyContent: 'center'
        }}
        >
          <h1>Scratch card</h1>
        </div>
      </ScratchCard>
    </div>
  );
};

Custom brush

const App = () => {
  return (
    <div>
      <ScratchCard
        width={320}
        height={226}
        image={IMG}
        finishPercent={80}
        customBrush={{
          image: require('./brush.img'),
          width: 15,
          height: 15
        }}
      >
        <h1>Scratch card</h1>
      </ScratchCard>
    </div>
  );
};

or you can use CUSTOM_BRUSH_PRESET object

import { CUSTOM_BRUSH_PRESET } from 'react-scratchcard-v3';

const App = () => {
  return (
    <div>
      <ScratchCard
        width={320}
        height={226}
        image={IMG}
        finishPercent={80}
        customBrush={CUSTOM_BRUSH_PRESET}
      >
        <h1>Scratch card</h1>
      </ScratchCard>
    </div>
  )
}

Type

Props

name	type	default
width	number
height	number
image	File or Base64
finishPercent	?number	70
triggerPercent	?number	5
brushSize	?number	20
fadeOutOnComplete	?boolean	true
onComplete	?callback
onTrigger	?callback
customBrush	?CustomBrush
customCheckZone	?CustomCheckZone