# react-scratchcard-v4

> A scratchcard component for React

Latest version **1.1.6** (published 2022-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-scratchcard-v4
pnpm add react-scratchcard-v4
yarn add react-scratchcard-v4
bun add react-scratchcard-v4
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2022-07-12 |
| First published | 2022-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | gshudhanshu |
| Maintainers | gshudhanshu |

## Links

- npm: https://www.npmjs.com/package/react-scratchcard-v4
- Repository: https://github.com/gshudhanshu/react-scratchcard-v4
- Homepage: https://github.com/gshudhanshu/react-scratchcard-v4#readme
- Issues: https://github.com/gshudhanshu/react-scratchcard-v4/issues
- npm.io page: https://npm.io/package/react-scratchcard-v4

## Recent versions

- 1.1.6 (latest) — 2022-07-12
- 1.1.5 — 2022-07-12
- 1.1.4 — 2022-06-20
- 1.1.2 — 2022-06-20

## README

# react-scratchcard-v4

> A scratchcard component for React

[![NPM](https://img.shields.io/npm/v/react-scratchcard-v4.svg)](https://www.npmjs.com/package/react-scratchcard-v4) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

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

![scratchcard-demo](https://user-images.githubusercontent.com/22329040/140519100-b6ee86e3-0009-4ab6-bcd0-c7fefdb8720d.gif)

## Install

```bash
npm install --save react-scratchcard-v4
```

or

```bash
yarn add react-scratchcard-v4
```

## Usage

```tsx
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

```tsx
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

```tsx
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](https://github.com/gshudhanshu)

---
_Source: https://npm.io/package/react-scratchcard-v4 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._