react-google-invisible-recaptcha - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.js

@@ -29,4 +29,24 @@ 'use strict';
 
-var recaptchaScript = void 0;
+var renderers = [];
 
+var injectScript = function injectScript(locale) {
+  window.GoogleRecaptchaLoaded = function () {
+    while (renderers.length) {
+      var renderer = renderers.pop();
+      renderer();
+    }
+  };
+
+  var script = document.createElement('script');
+  script.id = 'recaptcha';
+  script.src = 'https://www.google.com/recaptcha/api.js?hl=' + locale + '&onload=GoogleRecaptchaLoaded&render=explicit';
+  script.type = 'text/javascript';
+  script.async = true;
+  script.defer = true;
+  script.onerror = function (error) {
+    throw error;
+  };
+  document.body.appendChild(script);
+};
+
 var GoogleRecaptcha = function (_React$Component) {
@@ -52,8 +72,8 @@ _inherits(GoogleRecaptcha, _React$Component);
 
+
       this.callbackName = 'GoogleRecaptchaResolved-' + (0, _v2.default)();
-
       window[this.callbackName] = onResolved;
 
-      var initialize = function initialize() {
-        var recaptchaId = grecaptcha.render(_this2.container, {
+      var loaded = function loaded() {
+        var recaptchaId = window.grecaptcha.render(_this2.container, {
           sitekey: sitekey,
@@ -65,30 +85,19 @@ size: 'invisible',
         _this2.execute = function () {
-          return grecaptcha.execute(recaptchaId);
+          return window.grecaptcha.execute(recaptchaId);
         };
         _this2.reset = function () {
-          return grecaptcha.reset(recaptchaId);
+          return window.grecaptcha.reset(recaptchaId);
         };
         _this2.getResponse = function () {
-          return grecaptcha.getResponse(recaptchaId);
+          return window.grecaptcha.getResponse(recaptchaId);
         };
       };
 
-      if (recaptchaScript) {
-        initialize();
+      if (window.grecaptcha) {
+        loaded();
       } else {
-        window.GoogleRecaptchaLoaded = function () {
-          return initialize();
-        };
-
-        var script = document.createElement('script');
-        script.id = 'recaptcha';
-        script.src = 'https://www.google.com/recaptcha/api.js?hl=' + locale + '&onload=GoogleRecaptchaLoaded&render=explicit';
-        script.type = 'text/javascript';
-        script.async = true;
-        script.defer = true;
-        script.onerror = function (error) {
-          throw error;
-        };
-        document.body.appendChild(script);
-        recaptchaScript = script;
+        renderers.push(loaded);
+        if (!document.querySelector('#recaptcha')) {
+          injectScript(locale, loaded);
+        }
       }
@@ -95,0 +104,0 @@ }

package.json

 {
   "name": "react-google-invisible-recaptcha",
   "author": "szchenghuang <[e-mail]>",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A React component which is simply interested in Google invisible reCaptcha.",
@@ -6,0 +6,0 @@ "main": "index.js",

README.md

@@ -7,10 +7,12 @@ # react-google-invisible-recaptcha #
 
-Type something in the input box and click the button to submit data. The value is then checked to make up example client-side validation. Only valid input triggers reCAPTCHA. Since the reCAPTCHA is invisible, it most likely proceeds as if none is attached. You will be present the figure of the reCAPTCHA only when Google hesitates to tell your identity.
+Type something in an input box and click the button to submit data. The value is then checked to make up example client-side validation. Only valid input triggers reCAPTCHA. Since the reCAPTCHA is invisible, it proceeds most likely as if none is attached. You will only be present the figure of the reCAPTCHA when Google hesitates to tell your identity.
 
-When reCAPTCHA is resolved, the demo page shows the result token for demo purpose. In a real application, it should be used in a HTTP request to `https://www.google.com/recaptcha/api/siteverify?secret=<secret>&response=<token>` on the server to validate the reCAPTCHA result before performing sensitive operation. Don't forget to check values derived from clients as well on the server.
+When reCAPTCHA is resolved, the demo page shows the result token for demo purpose. In a real application, it should be used with a HTTP request targeting at `https://www.google.com/recaptcha/api/siteverify?secret=<secret>&response=<token>` on the server to validate the reCAPTCHA result before any sensitive operation is performed. Also, don't forget to check input values derived from clients as well on the server.
 
-Below is its source.
+## Example ##
 
+Below is a component which coordinates the procedure.
+
 ```js
-class App extends React.Component {
+class Example extends React.Component {
   constructor( props ) {
@@ -17,0 +19,0 @@ super( props );

No alert changes

Improved metrics

Total package byte prevSize

10983

increased by2.19%

Lines of code

104

increased by8.33%

Number of lines in readme file

95

increased by2.15%

No dependency changes