Add lang prop.

erickcrus · Jul 3, 2020 · f4cd912 · f4cd912
1 parent 428eb92
commit f4cd912
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -64,6 +64,7 @@ class App extends Component {
 
 |Name|Value|Default|Description|
 |-|-|-|-|
+|lang|`string`||[Language code](https://developers.google.com/recaptcha/docs/language).|
 |siteKey|`string`||Your sitekey.|
 |baseUrl|`string`||The URL (domain) configured in the reCAPTCHA setup. (ex. http://my.domain.com)|
 |headerComponent|`React Element`||A component to render on top of Modal.|
@@ -75,14 +76,16 @@ class App extends Component {
 |onError|`function(error)`||A callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.|
 |onClose|`function()`|| A callback function, executed when the Modal is closed.|
 
+Note: If `lang` is not set, then device language is used.
+
 ## Methods
 
 |Name|Type|Description|
 |-|-|-|-|
 |open|`function`|Open the reCAPTCHA Modal.|
 |close|`function`|Close the reCAPTCHA Modal.|
 
-Note: If using `size="invisible"`, then the challange will be called automatically when the Modal is opened.
+Note: If using `size="invisible"`, then challange run automatically when `open` is called.
 
 ## reCAPTCHA v2 docs
 

diff --git a/Sample/src/App.js b/Sample/src/App.js
@@ -50,8 +50,9 @@ const App = () => {
         </View>
 
         <Recaptcha
-          headerComponent={<Button title="Fechar" onPress={handleClosePress} />}
           ref={$recaptcha}
+          lang="en"
+          headerComponent={<Button title="Fechar" onPress={handleClosePress} />}
           siteKey="6LejsqwZAAAAAGsmSDWH5g09dOyNoGMcanBllKPF"
           baseUrl="http://127.0.0.1"
           size={size}

diff --git a/src/Recaptcha.js b/src/Recaptcha.js
@@ -70,6 +70,7 @@ const Recaptcha = forwardRef(
       size,
       siteKey,
       baseUrl,
+      lang,
     },
     $ref,
   ) => {
@@ -84,9 +85,10 @@ const Recaptcha = forwardRef(
       return getTemplate({
         siteKey,
         size,
-        theme
+        theme,
+        lang,
       });
-    }, [siteKey, size, theme]);
+    }, [siteKey, size, theme, lang]);
 
     const handleLoad = useCallback(
       (...args) => {

diff --git a/src/get-template.js b/src/get-template.js
@@ -25,13 +25,13 @@
 const getTemplate = (params) => {
   let template = `
     <!DOCTYPE html>
-    <html lang="en">
+    <html lang="{{lang}}">
     
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title></title>
-        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+        <script src="https://www.google.com/recaptcha/api.js?hl={{lang}}" async defer></script>
         <script>
             const siteKey = '{{siteKey}}';
             const theme = '{{theme}}';
@@ -175,8 +175,8 @@ const getTemplate = (params) => {
 
   Object.entries(params)
     .forEach(([key, value]) => {
-      template = template.replace(`{{${key}}}`, value);
-    })
+      template = template.replace(new RegExp(`{{${key}}}`, 'img'), value);
+    });
 
   return template;
 };

diff --git a/template/index.html b/template/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{lang}}">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
-    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+    <script src="https://www.google.com/recaptcha/api.js?hl={{lang}}" async defer></script>
     <script>
         const sitekey = '{{site-key}}';
         const theme = '{{theme}}';