# @nabidam/react-captcha

> Captcha component for reactjs

Latest version **1.2.0** (published 2021-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nabidam/react-captcha
pnpm add @nabidam/react-captcha
yarn add @nabidam/react-captcha
bun add @nabidam/react-captcha
```

## 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.2.0 |
| Published | 2021-08-06 |
| First published | 2021-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 33.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | navid |
| Maintainers | nabidam |
| Keywords | react, components, ui, captcha |

## Links

- npm: https://www.npmjs.com/package/@nabidam/react-captcha
- Repository: https://github.com/nabidam/react-captcha
- Homepage: https://github.com/nabidam/react-captcha#readme
- Issues: https://github.com/nabidam/react-captcha/issues
- npm.io page: https://npm.io/package/@nabidam/react-captcha

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2021-08-06
- 1.1.0 — 2021-08-06
- 1.0.1 — 2021-08-06
- 1.0.0 — 2021-08-06
- 0.4.1 — 2021-07-30
- 0.4.0 — 2021-07-29
- 0.3.2 — 2021-07-24
- 0.3.1 — 2021-07-24
- 0.3.0 — 2021-07-23
- 0.2.0 — 2021-07-23
- 0.1.0 — 2021-07-23

## README

# Reusable react captcha component

It's a react component that you can use it to generate captcha very easy.

Demo: [nabidam-react-captcha.netlify.app](https://nabidam-react-captcha.netlify.app/)

## Installation

```bash
npm install @nabidam/react-captcha
```

## Usage

### Simple usage

1. Import the component.

    ```javascript
    import { Captcha } from "@nabidam/react-captcha"
    ```

2. Define your `state`. We are going to pass setter to the component.

    ```javascript
    const [captcha, setCaptcha] = useState("");
    ```

3. Use the component.

    ```javascript
    <Captcha setWord={setCaptcha}/>
    ```

4. When the parent component is rendered, `setCaptcha` will fire and the value assigned to `captcha`.

### Reload when validation failed

You can reload the captcha whenever user submits the wrong value.

1. Use `useRef` to define a reference to the component.

    ```javascript
    const captchaRef = useRef();
    .
    .
    .
    <Captcha setWord={setCaptcha} ref={captchaRef} />
    ```

2. Call method `initializeCaptcha` from the component whenever user submits wrong value.

    ```javascript
    if(userInput !== captcha){
        // your code
        captchaRef.current.initializeCaptcha();
    }
    ```


## Props

|        name        |     type     |    default     |                      description                      |
| :----------------: | :----------: | :------------: | :---------------------------------------------------: |
|      setWord       |   function   |       -        |           callback to store captcha value.            |
| numberOfCharacters |    number    |       4        |       number of characters to generate captcha        |
|    persianChars    |   boolean    |     false      |           use persian letters to generate?            |
|     reloadText     |    string    | Reload Captcha |               text of the reload button               |
|      reloadEl      | html element |       -        | you can pass reload element entirely to the component |
|  backgroundColor   | color strong |    #0c0c0c     |                color of the background                |
|     fontColor      | color string |      #fff      |                   color of the text                   |

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