🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-scratchcard-v2

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scratchcard-v2

A scratchcard component for React

1.1.1
latest
Source
npm
Version published
Maintainers
1
Created
Source

react-scratchcard-v2

A scratchcard component for React

NPM JavaScript Style Guide

Note

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

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

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

nametypedefault
widthnumber
heightnumber
imageFile or Base64
finishPercent?number70
brushSize?number20
fadeOutOnComplete?booleantrue
onComplete?callback
customBrush?CustomBrush
customCheckZone?CustomCheckZone

CustomBrush

nametype
widthnumber
heightnumber
imageFile or Base64

CustomCheckZone

nametype
xnumber
ynumber
widthnumber
heightnumber

License

MIT © dopey2

FAQs

Package last updated on 16 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts