if I want to load the captcha by clicking refresh button its loading, but when we navigate to another page and clicking browser back button then captcha is going to disappear. How to resolve that problem that every time (either you refresh or clicking from browser back button) captcha should shown
import React, { useState } from "react";
import Recaptcha from "react-recaptcha";
export default function DropDown() {
const grecaptchaObject = window.grecaptcha;
function captchaVerify(response) {
if (response !== "") {
//some code
} else if ((response === "")) {
//some code
}
}
function recaptchaLoaded() {
}
return (
<>
<div>
<Recaptcha
sitekey="Your-Site-Key"
render="explicit"
onloadCallback={recaptchaLoaded}
verifyCallback={captchaVerify}
grecaptcha={grecaptchaObject}
/>
</div>
</>
);
}
Try to disabling the <React.StrictMode> in index.js like this:
const root = createRoot(container);
root.render(
// <React.StrictMode>
<App />
// </React.StrictMode>
);
You have to use the reset method. From the docs:
The reCAPTCHA widget can be manually reset by accessing the component instance via a callback ref and calling .reset() on the instance.
var Recaptcha = require('react-recaptcha');
// create a variable to store the component instance
let recaptchaInstance;
// create a reset function
const resetRecaptcha = () => {
recaptchaInstance.reset();
};
ReactDOM.render(
<div>
<Recaptcha
ref={e => recaptchaInstance = e}
sitekey="xxxxxxxxxxxxxxxxxxxx"
/>
<button
onClick={resetRecaptcha}
>
Reset
</button>
</div>,
document.getElementById('example')
);
To get this to work on each load, you can take advantage of the useEffect hook:
useEffect(() => {
recaptchaInstance.reset();
, []);