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