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
Use LeminCroppedCaptchaContainer component in your View:
Lemin Captcha must be placed inside of a “form” element.
import { LeminCroppedCaptchaContainer } from "@leminnow/react-lemin-cropped-captcha";
function App() {
return (
<div>
<form>
<LeminCroppedCaptchaContainer
containerId="..." // your captcha div id
captchaId="CROPPED_..." // your captcha id
/>
</form>
</div>
);
}
This component prepares the lemin captcha and marks where the captcha will appear if necessary.
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")
Usage Examples
Automatically bind the challenge to a button
Please ensure you set the ID field of your form submit element to "leminSubmitButton".
If this method is not suitable for you, consider using the programmatically invoke the challenge method.
import {
leminCroppedCaptcha,
LeminCroppedCaptchaContainer,
} from "@leminnow/react-lemin-cropped-captcha";
export function App() {
const captchaId = "..." // your captcha div id
const containerId = "CROPPED_..." // your captcha id
const handleSubmit = (event) => {
event.preventDefault();
event.stopPropagation();
const captchaValues = leminCroppedCaptcha
.getCaptcha(captchaId)
.getCaptchaValue();
const isCaptchaValid = captchaValues.answer && captchaValues.challenge_id;
if (isCaptchaValid) {
//execute your method
}
};
return (
<form onSubmit={handleSubmit}>
<LeminCroppedCaptchaContainer
containerId={captchaId}
captchaId={containerId}
/>
<button className="btn btn-primary" type="submit" id="leminSubmitButton">
Submit
</button>
</form>
);
}
Programmatically invoke the challenge
To use this feature, you must have version 0.2.0 or newer of the @leminnow/react-lemin-cropped-captcha package.
If you use the programmatically invoke challenge method, please ensure that the submit button ID is NOT "leminSubmitButton".
If you wish to have more control over when Invisible Captcha runs, you can use the execute method in leminCroppedCaptcha object.
export function App() {
const captcha = leminCroppedCaptcha.getCaptcha();
const onYourHandler = () => {
captcha.execute().then(({ answer, challenge_id }) => {
const isCaptchaValid = answer && challenge_id;
if (isCaptchaValid) {
//execute your method
}
});
};
}