# simple-scratch-card

> Simple scratch card

Latest version **3.0.2** (published 2023-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-scratch-card
pnpm add simple-scratch-card
yarn add simple-scratch-card
bun add simple-scratch-card
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2023-11-02 |
| First published | 2023-10-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 467.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pradeep G |
| Maintainers | pradeep2445 |
| Keywords | Simple Scratch Card, Scratch Card, Coupon Card, React, pradeepg2445 |

## Links

- npm: https://www.npmjs.com/package/simple-scratch-card
- npm.io page: https://npm.io/package/simple-scratch-card

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2023-11-02
- 3.0.1 — 2023-10-10

## README

[![NPM](https://img.shields.io/badge/NPM-ba443f?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/)
[![React](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/en/)
[![React](https://img.shields.io/badge/-ReactJs-61DAFB?style=for-the-badge&logo=react&logoColor=white)](https://zh-hant.reactjs.org/)
[![React](https://img.shields.io/badge/Less-1d365d?style=for-the-badge&logo=less&logoColor=white)](https://lesscss.org/)
[![React](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://www.w3schools.com/html/)
[![React](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://www.w3schools.com/css/)
[![NPM](https://img.shields.io/badge/DEV-Jameshsu1125-9cf?style=for-the-badge)](https://www.npmjs.com/~jameshsu1125)



# Installation

```sh
npm install simple-scratch-card --save
```

# Description
It is a modified version of the lesca-react-scratch-card. I need some extra features in that. So I created a simple-scratch-card. And a lot of thanks to lesca-react-scratch-card 🥳🎉. 

# What is fixed?
1. Now its working on firefox.
2. Bug in opacity of the card was fixed.
3. Scratch not working while scrolling the parent div was fixed.

# Requirement

Use react `v18+`.


## Usage

Import the package

```javascript
import ScratchCard from 'simple-scratch-card';
import Image from './img/cover.jpg';
```

In the compnenet

```javascript
const component = () => {
  return (
    <ScratchCard
      cover={Image}
      percent={50}
      width={100}
      height={100}
      onComplete={() => {
        // Some code here
      }}
    >
      Your card content
    </ScratchCard>
  );
};
```

## Development

### Props

| Props                     |           description            | default |
| :------------------------ | :------------------------------: | ------: |
| **cover**:_string_        |     scratch card cover image     |         |
| **width**:_number_        |            card width            |     320 |
| **height**:_number_       |           card height            |     240 |
| **percent**:_number_      | how much percent to complete it? |      50 |
| **onComplete**:_function_ |      callback when complete      |         |


[ci-badge]: https://github.com/executablebooks/markdown-it-plugin-template/workflows/CI/badge.svg
[ci-link]: https://github.com/executablebooks/markdown-it--plugin-template/actions
[npm-badge]: https://img.shields.io/npm/v/markdown-it-plugin-template.svg
[npm-link]: https://www.npmjs.com/package/markdown-it-plugin-template
[github actions]: https://docs.github.com/en/actions
[github pages]: https://docs.github.com/en/pages
[prettier]: https://prettier.io/
[eslint]: https://eslint.org/
[jest]: https://facebook.github.io/jest/
[rollup]: https://rollupjs.org
[npm]: https://www.npmjs.com
[unpkg]: https://unpkg.com/

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