react-scratchcard-v4

A scratchcard component for React

Original repo by Aleksik (not maintained)

https://github.com/aleksik/react-scratchcard

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

V4 Improvement ✨

Fixed "Unable to preventDefault inside passive event listener" Fixed Multiple onChange reqests

Demo

Install

npm install --save react-scratchcard-v4

or

yarn add react-scratchcard-v4

Usage

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

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-v4';

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 | | brushSize | ?number | 20 | | fadeOutOnComplete | ?boolean | true | | onComplete | ?callback | | | customBrush | ?CustomBrush | | | customCheckZone | ?CustomCheckZone | |

CustomBrush

| name | type | | -------- | -------------- | | width | number | | height | number | | image | File or Base64 |

CustomCheckZone

| name | type | | -------- | -------- | | x | number | | y | number | | width | number | | height | number |

License

MIT © gshudhanshu