[changed] dynamic url creation to allow language change

- probably a good idea to set removeOnUnmount at the same time to avoid conflicts

Author: dozoisch

README.md

@@ -67,14 +67,17 @@ Other properties can be used to customise the rendering.
 | badge | enum | *optional* `bottomright`, `bottomleft` or `inline`. Positions reCAPTCHA badge. *Only for invisible 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.
+__lang__: 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.
 
-If google.com is blocked, you can set useRecaptchaNet to `true` so that the component uses recaptcha.net instead.
+__useRecaptchaNet__: If google.com is blocked, you can set useRecaptchaNet to `true` so that the component uses recaptcha.net instead.
+
+__removeOnMount__: If you plan to change the lang dynamically, removeOnMount should probably be true. This will allow you to unmount the reCAPTCHA component and remount it with a new language.
 
 ```js
 window.recaptchaOptions = {
   lang: 'fr',
   useRecaptchaNet: true,
+  removeOnMount: false,
 };
 ```
 

package.json

@@ -74,6 +74,6 @@
   },
   "dependencies": {
     "prop-types": ">=15.5.0",
-    "react-async-script": ">=0.10.0"
+    "react-async-script": ">=0.11.0"
   }
 }

src/recaptcha-wrapper.js

@@ -1,16 +1,25 @@
 import ReCAPTCHA from "./recaptcha";
 import makeAsyncScriptLoader from "react-async-script";
 
-const callbackName = "onloadcallback";
-const options = (typeof window !== "undefined" && window.recaptchaOptions) || {};
+function getOptions() {
+  return (typeof window !== "undefined" && window.recaptchaOptions) || {};
+}
+function getURL() {
+  const dynamicOptions = getOptions();
+  const lang = dynamicOptions.lang ? `&hl=${dynamicOptions.lang}` : "";
+  const hostname = dynamicOptions.useRecaptchaNet
+    ? "recaptcha.net"
+    : "www.google.com";
+  return `https://${hostname}/recaptcha/api.js?onload=${callbackName}&render=explicit${lang}`;
+}
 
-const lang = options.lang ? `&hl=${options.lang}` : "";
-const hostname = options.useRecaptchaNet ? "recaptcha.net" : "www.google.com";
-const URL = `https://${hostname}/recaptcha/api.js?onload=${callbackName}&render=explicit${lang}`;
+const callbackName = "onloadcallback";
 const globalName = "grecaptcha";
+const initialOptions = getOptions();
 
-export default makeAsyncScriptLoader(ReCAPTCHA, URL, {
+export default makeAsyncScriptLoader(ReCAPTCHA, getURL, {
   callbackName,
   globalName,
-  exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"],
+  removeOnMount: initialOptions.removeOnMount || false,
+  exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"]
 });