Open BurN-SN opened 2 years ago
I was able to solve this by conditionally rendering different ReCaptcha components like so:
{/* SEPARATE RECAPTCHA INSTANCES NEEDED FOR EACH LANGUAGE TO ALLOW TOGGLING */}
{language==="de" && (
<ReCAPTCHA
sitekey='xxxxxxxxxx'
render="explicit"
verifyCallback={handleCaptcha}
hl='de'
/>
)}
{language==="en" && (
<ReCAPTCHA
sitekey="xxxxxxxxxx"
reneder="explicit"
verifyCallback={handleCaptcha}
hl='en'
/>
)}
I would still like to know if there is another solution to my problem out there. As our client expands into more language regions this will become very verbose and obviously repeated code is bug-prone and suboptimal
Thanks!
I was able to solve this by conditionally rendering different ReCaptcha components like so:
{/* SEPARATE RECAPTCHA INSTANCES NEEDED FOR EACH LANGUAGE TO ALLOW TOGGLING */}
{language==="de" && (
<ReCAPTCHA
sitekey='xxxxxxxxxx'
render="explicit"
verifyCallback={handleCaptcha}
hl='de'
/>
)}
{language==="en" && (
<ReCAPTCHA
sitekey="xxxxxxxxxx"
reneder="explicit"
verifyCallback={handleCaptcha}
hl='en'
/>
)}
I would still like to know if there is another solution to my problem out there. As our client expands into more language regions this will become very verbose and obviously repeated code is bug-prone and suboptimal
Thanks!
I found this other workaround.
lang
is a valid language code string ("en"
, "es"
, "pt"
, etc). Passing it as key
to the react component forces a remount when lang changes and the component successfully re-mounts with the value of lang
in the hl
prop.
<ReCAPTCHA
sitekey="xxxxxxxxxx"
reneder="explicit"
verifyCallback={handleCaptcha}
hl={lang}
key={lang}
/>
@fbrcc thank you so much. I solved my issue by this.
Hey there,
I am having an issue with ReCAPTCHA on a site that requires instant translation. I can use the
hl
prop to pass it a language, but if the user changes the language, the ReCaptcha remains in the initial language and does not update to reflect the user's selection.I will try to distill the implementation.
The context is working correctly. It is successfully translating the other form fields and other content on the page and console logs confirm that the language is in fact switching when user switches the language in the header. Additionally, all the language codes in question work correctly with the ReCaptcha if hard-coded or active on initial load (an invalid lang code is not the issue).
However, the ReCaptcha seems "stuck" on whatever language it has at initial load and will not update with context changes.
Attempted Solutions
I have tried various configurations around "explicit" render.
I have tried wrapping the ReCaptcha componenet in another component and passing the lang code as a prop in hopes that the props updating would trigger a rerender.
I have tried a switch() statement as a helper method that would run at render and return the appropriate ReCaptcha component, like so:
I really hope someone here can help!