Prerequisites
First, you should get your Captcha ID and Captcha Div ID
Please visit for more information: Displaying Lemin CAPTCHA
Installation
Install captcha wrapper with npm:
npm i @leminnow/react-lemin-cropped-captcha
Also, you can install captcha wrapper with yarn:
yarn add @leminnow/react-lemin-cropped-captcha
Integration
Lemin Captcha must be placed inside of a “form” element.
Please ensure that your captcha-div-id is the same as the captcha-div-id you've set before. If you set a captcha-div-id for your Lemin Captcha in the advanced settings, this div must have that same captcha-div-id. (default: "lemin-cropped-captcha")
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.