react-scratchcard-v2

A scratchcard component for React

Original repo by Aleksik (not maintained)

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

V2 Improvement ✨

• Resize the image using width and height props (in the original repo, the image was croped)
• Smooth fade out animation on scratch complete
• Add type definition (ts)
• Change brush size through props
• Use custom brush through props
• Define a custom check zone through props

Demo

Install

npm install --save react-scratchcard-v2

or

yarn add react-scratchcard-v2

Usage

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

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

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 © dopey2