Table Of Contents

• Getting Started
• Installation
• Usage
• Documentation
• API

Getting Started

How can I get my captchaId ?

Select a puzzle captcha from your puzzle captchas

Copy your captchaId from your puzzle's captcha script source

How can I get my containerId ?

Click on Advanced Settings from the puzzle captcha of your choice

Copy your containerId from Captcha Div ID

Installation

Installation with npm:

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

Installation with yarn:

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

Usage Examples

Use LeminCroppedCaptchaContainer in your component

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

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

Use LeminCroppedCaptchaContainer with Src in your component

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>
    );
}

Use captcha methods with Multiple Instances

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>
    );
}

Use captcha methods with LeminCroppedCaptcha Object

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>
    );
}

Documentation

Click here to documentation for Lemin Cropped Captcha

Click here to developers guide

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

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 | () => | |