Set window.recaptchaOptions.lang dynamically after creating the store

[vthirumakil]

I'm trying to set the recaptcha language dynamically in my application. Looking at the documentation here https://github.com/dozoisch/react-google-recaptcha

In order to translate the reCaptcha widget, you should create a global variable configuring the desired language. If you don't provide it, reCaptcha will pick up the user's interface language. window.recaptchaOptions = { lang: 'fr' } This works if I set the global window.recaptchaOptions object in root app.js file

The issue that I'm trying to resolve is setting the window.recaptchaOptions inside the index.js after creating the store so I can access the locale dynamically.

Investigating the requests, it looks like the google recaptcha__fr script is pulled in only if I set the global window.recaptchaOptions in the root App. This doesn't allow me to access the store.

Any thoughts on how I can fix this so I can set the window.recaptchaOptions in index.js after creating the store?

Thanks

[nhulongctk10]

I also have the same issue. Please help

[dozoisch]

@nhulongctk10 I'm open to PRs. This is not something that I personally need for any of my projects unfortunately and don't have the personal bandwidth to do it.

[nhulongctk10]

@dozoisch Thank you. I fixed this issue by adding below script at the end of body tag

<script>
    window.recaptchaOptions = { lang: 'ja' };
 </script>

[vthirumakil]

My question was how to specify the lang value dynamically... I ended up doing something like above but that doesn't work if I want the language to be dependent on the browser settings/language picker

[davidsonsns]

every time I change my language, I have to reload the page. And in main index file the value of window.recaptchaOptions = {lang: <dinamyc lang>} And in component I imported the component like this, basic example:

const Captcha = () => {
  const ReCAPTCHA = require('react-google-recaptcha').default

  return (
      <ReCAPTCHA
        sitekey={process.env.REACT_APP_RECAPTCHA}
      />
  )
}

may not be the best shape, but it worked

[mahyar33]

Hi I have the same problem I want to choose my language in component How can i do??

[PersianArt]

Hi, I dont know where I must add this code

window.recaptchaOptions = {
    lang: 'fa'
}

I put it in index.js, app.js, login.js, loginfrom.js but nothing happened. what I must do?

[asonni]

@PersianArt Try to put this code in index.html before </body> closing tag like this

<script>
  window.recaptchaOptions = {
     lang: 'fa'
   }
</script>

[PersianArt]

@asonni Thank you but I need use it in my react project dynamically if it is possible.

[asonni]

I am very sorry @PersianArt, but it's not possible at moment. You should try to search for a new package instead.

[dozoisch]

@PersianArt this pr https://github.com/dozoisch/react-async-script/pull/30 will make it possible. Should be merged soon, and then I'll update it here.

[PersianArt]

@dozoisch Thank you, this is a good news.

[dozoisch]

@PersianArt I released 0.14 that should allow to change lang dynamically. You might have to set removeOnUnmount in the options (on first page render) to make sure the tag gets removed, otherwise it might conflict. Let me know if it works, haven't had much time to play around with it, but it should be a step in the good direction.

[dgagne-cs]

@dozoisch I could be doing something wrong, but with removeOnUnmount set to true, react does seem to re-render the component. However, in spite of having changed window.recaptchaOptions.lang and having called reset, it seems like captcha v2 is still calling the api with the param hl=fr (..or whatever language was set when the component was created).

[galimuddin]

I am using version "^1.1.1" and i am able to change the language just by passing the prop <ReCAPTCHA hl="fr" /> window.recaptchaOptions didnt work though

[dgagne-cs]

@galimuddin - Thanks for the heads-up. It seems like I need to upgrade my React version in order to use 1.1.1, so I will definitely report back when we've tried that. It did not seem to work on 0.14, but maybe that also requires a newer version of react-asynch-script

[NisalG]

Hope my SO answer will help someone come across this: https://stackoverflow.com/questions/46819154/how-to-implement-google-recaptcha-with-redux-form/55176803

[FrederickEngelhardt]

When I navigate to a route such as /es after unmounting this component I am still using recaptcha in the /es route I loaded first.

Was this issue resolved? I'm not able to get this component to change languages even when I unmount and remount.

Any suggestions?

Update: Solution

Remove on unmount seems to not work as expected :(