Skip to content

Commit 701695b

Browse files
committedJul 29, 2018
[changed] dynamic url creation to allow language change
- probably a good idea to set removeOnUnmount at the same time to avoid conflicts
1 parent 33e58fe commit 701695b

File tree

3 files changed

+22
-10
lines changed

3 files changed

+22
-10
lines changed
 

‎README.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,17 @@ Other properties can be used to customise the rendering.
6767
| badge | enum | *optional* `bottomright`, `bottomleft` or `inline`. Positions reCAPTCHA badge. *Only for invisible reCAPTCHA* |
6868

6969

70-
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.
70+
__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.
7171

72-
If google.com is blocked, you can set useRecaptchaNet to `true` so that the component uses recaptcha.net instead.
72+
__useRecaptchaNet__: If google.com is blocked, you can set useRecaptchaNet to `true` so that the component uses recaptcha.net instead.
73+
74+
__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.
7375

7476
```js
7577
window.recaptchaOptions = {
7678
lang: 'fr',
7779
useRecaptchaNet: true,
80+
removeOnMount: false,
7881
};
7982
```
8083

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,6 @@
7474
},
7575
"dependencies": {
7676
"prop-types": ">=15.5.0",
77-
"react-async-script": ">=0.10.0"
77+
"react-async-script": ">=0.11.0"
7878
}
7979
}

‎src/recaptcha-wrapper.js

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
import ReCAPTCHA from "./recaptcha";
22
import makeAsyncScriptLoader from "react-async-script";
33

4-
const callbackName = "onloadcallback";
5-
const options = (typeof window !== "undefined" && window.recaptchaOptions) || {};
4+
function getOptions() {
5+
return (typeof window !== "undefined" && window.recaptchaOptions) || {};
6+
}
7+
function getURL() {
8+
const dynamicOptions = getOptions();
9+
const lang = dynamicOptions.lang ? `&hl=${dynamicOptions.lang}` : "";
10+
const hostname = dynamicOptions.useRecaptchaNet
11+
? "recaptcha.net"
12+
: "www.google.com";
13+
return `https://${hostname}/recaptcha/api.js?onload=${callbackName}&render=explicit${lang}`;
14+
}
615

7-
const lang = options.lang ? `&hl=${options.lang}` : "";
8-
const hostname = options.useRecaptchaNet ? "recaptcha.net" : "www.google.com";
9-
const URL = `https://${hostname}/recaptcha/api.js?onload=${callbackName}&render=explicit${lang}`;
16+
const callbackName = "onloadcallback";
1017
const globalName = "grecaptcha";
18+
const initialOptions = getOptions();
1119

12-
export default makeAsyncScriptLoader(ReCAPTCHA, URL, {
20+
export default makeAsyncScriptLoader(ReCAPTCHA, getURL, {
1321
callbackName,
1422
globalName,
15-
exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"],
23+
removeOnMount: initialOptions.removeOnMount || false,
24+
exposeFuncs: ["getValue", "getWidgetId", "reset", "execute"]
1625
});

0 commit comments

Comments
 (0)
Failed to load comments.