From 701695b12b7d6f809271cdd012a484c74bd74ec9 Mon Sep 17 00:00:00 2001
From: Hugo Dozois <hugo.dozois@gmail.com>
Date: Sun, 29 Jul 2018 12:19:03 -0700
Subject: [PATCH] [changed] dynamic url creation to allow language change

- probably a good idea to set removeOnUnmount at the same time to avoid conflicts
---
 README.md                |  7 +++++--
 package.json             |  2 +-
 src/recaptcha-wrapper.js | 23 ++++++++++++++++-------
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 5df76f1..ddac3a5 100644
--- a/README.md
+++ b/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,
 };
 ```
 
diff --git a/package.json b/package.json
index d57dac3..3a98357 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,6 @@
   },
   "dependencies": {
     "prop-types": ">=15.5.0",
-    "react-async-script": ">=0.10.0"
+    "react-async-script": ">=0.11.0"
   }
 }
diff --git a/src/recaptcha-wrapper.js b/src/recaptcha-wrapper.js
index 1a5b500..0ba737f 100644
--- a/src/recaptcha-wrapper.js
+++ b/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"]
 });