react-scratchcard-v2-nirall

A scratchcard component for React (fork)

Original repo by dopey2

https://www.npmjs.com/package/react-scratchcard-v2

Improvements ✨

• Add a percentage change handler

Install

npm install --save react-scratchcard-v2-nirall

or

yarn add react-scratchcard-v2-nirall

Usage

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

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')}
        onPercentChange={v => console.log(`percentage ${v}%`)}
      >
        <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-nirall';

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 | | | onPercentChange | ?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 |