How to implement on React

Installation

Install captcha wrapper:

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

Using

Lemin Captcha must be placed inside of a “form” element.

Please ensure that your container-id is the same as the container-id you've set before.

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

Please, find below the example GitHub repository.

https://github.com/lemin-now/lemin_captcha_nextjs_example