npm package: @leminnow/react-lemin-cropped-captcha
Description: Lemin Captcha is uniquely playful, robust, and effective. Through gamification, we are curing the pains of traditional CAPTCHA.
Latest version: 0.2.0

<div>
<br>

<p style="padding: 30px" align="center">
  <a href="https://leminnow.com">
    <img width="200" src="https://assets.website-files.com/60d493b79d3973812262066c/60d6025cca81ce4522c799ed_footer-logo.svg" >
  </a>
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/@leminnow/react-lemin-cropped-captcha">
    <img src="https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white">
  </a>
  <a>
    <img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white">
  </a>
  <a>
    <img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB">
  </a>
</p>
<p align="center">
<a><img src="https://img.shields.io/npm/v/@leminnow/react-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/npm/dw/@leminnow/react-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/bundlephobia/min/@leminnow/react-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/npms-io/final-score/@leminnow/react-lemin-cropped-captcha?style=for-the-badge"></a>
<a><img src="https://img.shields.io/npms-io/quality-score/@leminnow/react-lemin-cropped-captcha?style=for-the-badge"></a>
</p>

<br>

<h1>React Lemin Cropped Captcha</h1>
<p style="font-size: 20px">Lemin Captcha is uniquely playful, robust, and effective. Through gamification, we are curing the pains of traditional CAPTCHA.</p>

<br>
<br>
</div>

## Table Of Contents
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)
- [Documentation](#documentation)
- [API](#api)

<br>

## <div id="getting-started"></div> Getting Started

### How can I get my `captchaId` ?
Select a puzzle captcha from <a href="https://dashboard.leminnow.com/products/captcha-list">your puzzle captchas</a>
<p style="padding: 30px">
<img style="max-width: 500px" src="https://s3.us-west-1.amazonaws.com/lemin.public/images/get_captcha_id.jpg" width="70%" height="auto">
</p>

Copy your `captchaId` from your puzzle's captcha script source

<br>

### How can I get my `containerId` ?

Click on **Advanced Settings** from the puzzle captcha of your choice

<p style="padding: 30px">
<img style="max-width: 500px" src="https://s3.us-west-1.amazonaws.com/lemin.public/images/get_container_id.jpg" width="70%" height="auto">
</p>

Copy your `containerId` from Captcha Div ID

<br>

## <div id="installation"></div> Installation
Installation with npm:

    npm install @leminnow/react-lemin-cropped-captcha

Installation with yarn:

    yarn add @leminnow/react-lemin-cropped-captcha

<br>

## <div id="usage"></div> Usage Examples

<br>

#### Use `LeminCroppedCaptchaContainer` in your component

```javascript
import {LeminCroppedCaptchaContainer} from "@leminnow/react-lemin-cropped-captcha";

function App() {
    return (
        <div>
            <form>
                <LeminCroppedCaptchaContainer
                    containerId={"..."}
                    captchaId={"CROPPED_..."}/>
            </form>
        </div>
    );
}
```

<br>

#### Use `LeminCroppedCaptchaContainer` with Src in your component

```javascript
import {LeminCroppedCaptchaContainer} from "@leminnow/react-lemin-cropped-captcha";

function App() {
    return (
        <div>
            <form>
                <LeminCroppedCaptchaContainer
                    containerId={"..."}
                    src={"https://api.leminnow.com/captcha/v1/cropped/CROPPED_..../js"}/>
            </form>
        </div>
    );
}
```

<br>

#### Use captcha methods with Multiple Instances

```javascript
import {leminCroppedCaptcha, LeminCroppedCaptchaContainer} from "@leminnow/react-lemin-cropped-captcha";

function getCaptchaValue() {
    const values = leminCroppedCaptcha.getCaptcha('CROPPED_...').getCaptchaValue()
}

function App() {
    return (
        <div>
            <form>
                <LeminCroppedCaptchaContainer
                    containerId={"..."}
                    captchaId={"CROPPED_..."}/>
            </form>
            <button onClick={getCaptchaValue}>Get captcha value</button>
        </div>
    );
}
```

<br>

#### Use captcha methods with `LeminCroppedCaptcha` Object

```javascript
import {LeminCroppedCaptcha, LeminCroppedCaptchaContainer} from "@leminnow/react-lemin-cropped-captcha";


const myCaptcha = new LeminCroppedCaptcha('...', 'CROPPED_...')

function getCaptchaValues() {
    const values = myCaptcha.getCaptchaValue();
}

function App() {
    return (
        <div>
            <form>
                <LeminCroppedCaptchaContainer
                    containerId={myCaptcha.containerId}
                    captchaId={myCaptcha.captchaId}/>
            </form>
            <button onClick={getCaptchaValues}>Get captcha values</button>
        </div>
    );
}
```

<br>

## <div id="documentation"></div> Documentation

### Click <a href="https://dashboard.leminnow.com/documentation/">here</a> to documentation for Lemin Cropped Captcha
### Click <a href="https://www.leminnow.com/developers">here</a> to developers guide

<br>

## <div id="api"></div> API

### leminCroppedCaptcha Methods

|  Name                      | Return Type               | Parameter      |  Description     |
|----------------------------|---------------------------|----------------|  --------------- |
| `getCaptcha`               |  CaptchaInstance          |(CAPTCHA_KEY: Optional String) => | Returns the given CAPTCHA_KEY's captcha instance. If CAPTCHA_KEY is empty, it will return first captcha instance.|
| `getInstances`             |  CaptchaInstance{}        | (CAPTCHA_KEY: Optional String) => | Returns all the instances of captchas                      |
| `destroyAll`               |  void                     | () =>                |  Destroys all captchas on the page.                |
| `reloadAll`                |  void                     | () =>               | Reload all captchas on the page.                 |

<br>

### LeminCroppedCaptcha Object Methods

|  Name                      | Return Type               | Parameter       | Description           |
|----------------------------|---------------------------|------------------|----------------------|
| `getCaptchaValue`          |  {"answer": "answer","challenge_id": "challenge_id"}|   () =>| Returns the captcha value on the page for needed validation |
| `isReady`                  |  boolean                     | () =>                 |  Returns the state of captcha                        |
| `reloadPuzzle`             |  void                     |  () =>                 | Reloads puzzle, you may use it in fail scenarios.                         |
| `onLoad`                   |  void                     |  (callbackFunction = function(){}) => | Calls the function when the captcha loaded.                          |
| `loadPuzzleError`          |  void                     | (callbackFunction = function(){}) =>                 |    Calls the function when the captcha loaded.                      |
| `destroyCaptcha`           |  void                     | () =>                   |  Destroys the captcha on the page                        |
| `adjustSize`               |  void                     | () =>                 |                      |
| `execute`                  |  Promise<{"answer": "answer","challenge_id": "challenge_id"}>| () =>                 |                      | It initiates invisible captcha programmatically; it's only applicable for Invisible Captcha!
| `display`                  |  void                     | () =>                 |                      |
| `getToken`                 |  void                     | () =>                 |                      |
| `loadPuzzleImage`          |  void                     | () =>                 |                      |
| `setUserinfo`              |  void                     | () =>                 |                      |
| `stopRefreshing`           |  void                     | () =>                 |                      |