Change lang to be used in props only

- old parameters is still used as as a default is no prop is sent

Author: dozoisch

README.md

@@ -114,18 +114,18 @@ ReactDOM.render(
 
 #### Global properties used by reCaptcha
 
-__lang__: By default google reCaptcha infers the user's interface language. In order to overwrite the language and update the translation for the reCaptcha widget, you can create a global variable configuring the desired language via `lang`.
+__lang__: *DEPRECATED* By default google reCaptcha infers the user's interface language. In order to overwrite the language and update the translation for the reCaptcha widget, you can create a global variable configuring the desired language via `lang`.
+
+*Instead use props.hl* reCaptcha now supports an hl property to be passed at render. The global lang parameter is no longer need and will be removed.
 
 __useRecaptchaNet__: If google.com is blocked, you can set `useRecaptchaNet` to `true` so that the component uses recaptcha.net instead.
 
-__removeOnUnmount__: If you plan to change the lang dynamically, `removeOnUnmount` should probably be `true`. This unloads the google recaptcha script on `componetWillUnmount` to allow for a new google recaptcha script to load next time the reCAPTCHA component is used to facilitate a new language if needed.
+__removeOnUnmount__: *REMOVED* This was only useful for the lang changes. Lang is now changed through
 
 Example global properties:
 ```js
 window.recaptchaOptions = {
-  lang: 'fr',
   useRecaptchaNet: true,
-  removeOnUnmount: false,
 };
 ```
 

src/recaptcha-wrapper.js

@@ -1,22 +1,16 @@
-import ReCAPTCHA from "./recaptcha";
+import ReCAPTCHA, { getOptions } from "./recaptcha";
 import makeAsyncScriptLoader from "react-async-script";
 
-function getOptions() {
-  return (typeof window !== "undefined" && window.recaptchaOptions) || {};
-}
+const callbackName = "onloadcallback";
+const globalName = "grecaptcha";
+
 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}`;
+  return `https://${hostname}/recaptcha/api.js?onload=${callbackName}&render=explicit`;
 }
 
-const callbackName = "onloadcallback";
-const globalName = "grecaptcha";
-const initialOptions = getOptions();
-
 export default makeAsyncScriptLoader(getURL, {
   callbackName,
   globalName,
-  removeOnUnmount: initialOptions.removeOnUnmount || false,
 })(ReCAPTCHA);

src/recaptcha.js

@@ -1,6 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+export function getOptions() {
+  return (typeof window !== "undefined" && window.recaptchaOptions) || {};
+}
+
 export default class ReCAPTCHA extends React.Component {
   constructor() {
     super();
@@ -53,6 +57,8 @@ export default class ReCAPTCHA extends React.Component {
 
   explicitRender() {
     if (this.props.grecaptcha && this.props.grecaptcha.render && this._widgetId === undefined) {
+      const hl = this.props.hl || getOptions().lang || undefined;
+
       const wrapper = document.createElement("div");
       this._widgetId = this.props.grecaptcha.render(wrapper, {
         sitekey: this.props.sitekey,
@@ -64,7 +70,7 @@ export default class ReCAPTCHA extends React.Component {
         "error-callback": this.handleErrored,
         size: this.props.size,
         stoken: this.props.stoken,
-        hl: this.props.hl,
+        hl,
         badge: this.props.badge,
       });
       this.captcha.appendChild(wrapper);