@hcaptcha/react-hcaptcha - npm Package Compare versions

Comparing version 1.4.2 to 1.4.3

dist/esm/index.js

@@ -57,2 +57,3 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 
+    _this.loadCaptcha = _this.loadCaptcha.bind(_assertThisInitialized(_this));
     _this.handleOnLoad = _this.handleOnLoad.bind(_assertThisInitialized(_this));
@@ -67,2 +68,3 @@ _this.handleSubmit = _this.handleSubmit.bind(_assertThisInitialized(_this));
     _this.ref = /*#__PURE__*/React.createRef();
+    _this.apiScriptRequested = false;
     _this.state = {
@@ -81,34 +83,15 @@ isApiReady: isApiReady,
     // Once captcha is mounted intialize hCaptcha - hCaptcha
-    var _this$props = this.props,
-        apihost = _this$props.apihost,
-        assethost = _this$props.assethost,
-        endpoint = _this$props.endpoint,
-        host = _this$props.host,
-        imghost = _this$props.imghost,
-        hl = _this$props.languageOverride,
-        reCaptchaCompat = _this$props.reCaptchaCompat,
-        reportapi = _this$props.reportapi,
-        sentry = _this$props.sentry,
-        custom = _this$props.custom;
     var isApiReady = this.state.isApiReady;
+    /*
+     * Check if hCaptcha has already been loaded,
+     * If Yes, render the captcha
+     * If No, create script tag and wait to render the captcha
+     */
 
-    if (!isApiReady) {
-      // Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
-      var mountParams = {
-        apihost: apihost,
-        assethost: assethost,
-        endpoint: endpoint,
-        hl: hl,
-        host: host,
-        imghost: imghost,
-        recaptchacompat: reCaptchaCompat === false ? "off" : null,
-        reportapi: reportapi,
-        sentry: sentry,
-        custom: custom
-      }; // Only create the script tag once, use a global promise to track
-
-      mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
-    } else {
+    if (isApiReady) {
       this.renderCaptcha();
+      return;
     }
+
+    this.loadCaptcha();
   };
@@ -154,2 +137,34 @@
 
+  _proto.loadCaptcha = function loadCaptcha() {
+    if (this.apiScriptRequested) {
+      return;
+    }
+
+    var _this$props = this.props,
+        apihost = _this$props.apihost,
+        assethost = _this$props.assethost,
+        endpoint = _this$props.endpoint,
+        host = _this$props.host,
+        imghost = _this$props.imghost,
+        hl = _this$props.languageOverride,
+        reCaptchaCompat = _this$props.reCaptchaCompat,
+        reportapi = _this$props.reportapi,
+        sentry = _this$props.sentry,
+        custom = _this$props.custom;
+    var mountParams = {
+      apihost: apihost,
+      assethost: assethost,
+      endpoint: endpoint,
+      hl: hl,
+      host: host,
+      imghost: imghost,
+      recaptchacompat: reCaptchaCompat === false ? "off" : null,
+      reportapi: reportapi,
+      sentry: sentry,
+      custom: custom
+    };
+    mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
+    this.apiScriptRequested = true;
+  };
+
   _proto.renderCaptcha = function renderCaptcha(onReady) {
@@ -156,0 +171,0 @@ var isApiReady = this.state.isApiReady;

dist/index.js

@@ -87,2 +87,3 @@ "use strict";
 
+    _this.loadCaptcha = _this.loadCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleOnLoad = _this.handleOnLoad.bind((0, _assertThisInitialized2["default"])(_this));
@@ -97,2 +98,3 @@ _this.handleSubmit = _this.handleSubmit.bind((0, _assertThisInitialized2["default"])(_this));
     _this.ref = /*#__PURE__*/React.createRef();
+    _this.apiScriptRequested = false;
     _this.state = {
@@ -111,34 +113,15 @@ isApiReady: isApiReady,
       // Once captcha is mounted intialize hCaptcha - hCaptcha
-      var _this$props = this.props,
-          apihost = _this$props.apihost,
-          assethost = _this$props.assethost,
-          endpoint = _this$props.endpoint,
-          host = _this$props.host,
-          imghost = _this$props.imghost,
-          hl = _this$props.languageOverride,
-          reCaptchaCompat = _this$props.reCaptchaCompat,
-          reportapi = _this$props.reportapi,
-          sentry = _this$props.sentry,
-          custom = _this$props.custom;
       var isApiReady = this.state.isApiReady;
+      /*
+       * Check if hCaptcha has already been loaded,
+       * If Yes, render the captcha
+       * If No, create script tag and wait to render the captcha
+       */
 
-      if (!isApiReady) {
-        // Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
-        var mountParams = {
-          apihost: apihost,
-          assethost: assethost,
-          endpoint: endpoint,
-          hl: hl,
-          host: host,
-          imghost: imghost,
-          recaptchacompat: reCaptchaCompat === false ? "off" : null,
-          reportapi: reportapi,
-          sentry: sentry,
-          custom: custom
-        }; // Only create the script tag once, use a global promise to track
-
-        mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
-      } else {
+      if (isApiReady) {
         this.renderCaptcha();
+        return;
       }
+
+      this.loadCaptcha();
     }
@@ -187,2 +170,35 @@ }, {
   }, {
+    key: "loadCaptcha",
+    value: function loadCaptcha() {
+      if (this.apiScriptRequested) {
+        return;
+      }
+
+      var _this$props = this.props,
+          apihost = _this$props.apihost,
+          assethost = _this$props.assethost,
+          endpoint = _this$props.endpoint,
+          host = _this$props.host,
+          imghost = _this$props.imghost,
+          hl = _this$props.languageOverride,
+          reCaptchaCompat = _this$props.reCaptchaCompat,
+          reportapi = _this$props.reportapi,
+          sentry = _this$props.sentry,
+          custom = _this$props.custom;
+      var mountParams = {
+        apihost: apihost,
+        assethost: assethost,
+        endpoint: endpoint,
+        hl: hl,
+        host: host,
+        imghost: imghost,
+        recaptchacompat: reCaptchaCompat === false ? "off" : null,
+        reportapi: reportapi,
+        sentry: sentry,
+        custom: custom
+      };
+      mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
+      this.apiScriptRequested = true;
+    }
+  }, {
     key: "renderCaptcha",
@@ -189,0 +205,0 @@ value: function renderCaptcha(onReady) {

package.json

 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "types": "types/index.d.ts",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.js

@@ -53,2 +53,3 @@ import * as React from 'react';
       // Event Handlers
+      this.loadCaptcha = this.loadCaptcha.bind(this);
       this.handleOnLoad = this.handleOnLoad.bind(this);
@@ -65,2 +66,3 @@ this.handleSubmit = this.handleSubmit.bind(this);
       this.ref = React.createRef();
+      this.apiScriptRequested = false;
 
@@ -76,38 +78,28 @@ this.state = {
     componentDidMount () { // Once captcha is mounted intialize hCaptcha - hCaptcha
-      const { apihost, assethost, endpoint, host, imghost, languageOverride:hl, reCaptchaCompat, reportapi, sentry, custom } = this.props;
       const { isApiReady } = this.state;
 
-      if (!isApiReady) {  // Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
-        const mountParams = {
-          apihost,
-          assethost,
-          endpoint,
-          hl,
-          host,
-          imghost,
-          recaptchacompat: reCaptchaCompat === false? "off" : null,
-          reportapi,
-          sentry,
-          custom
-        };
+      /*
+       * Check if hCaptcha has already been loaded,
+       * If Yes, render the captcha
+       * If No, create script tag and wait to render the captcha
+       */
+      if (isApiReady) {
+        this.renderCaptcha();
 
-        // Only create the script tag once, use a global promise to track
-        mountCaptchaScript(mountParams)
-          .then(this.handleOnLoad)
-          .catch(this.handleError);
-      } else {
-        this.renderCaptcha();
+        return;
       }
+
+      this.loadCaptcha();
     }
 
     componentWillUnmount() {
-        const { captchaId } = this.state;
+      const { captchaId } = this.state;
 
-        if (!this.isReady()) {
-          return;
-        }
+      if (!this.isReady()) {
+        return;
+      }
 
-        // Reset any stored variables / timers when unmounting
-        hcaptcha.reset(captchaId);
-        hcaptcha.remove(captchaId);
+      // Reset any stored variables / timers when unmounting
+      hcaptcha.reset(captchaId);
+      hcaptcha.remove(captchaId);
     }
@@ -138,2 +130,38 @@
 
+    loadCaptcha() {
+      if (this.apiScriptRequested) {
+        return;
+      }
+
+      const {
+        apihost,
+        assethost,
+        endpoint,
+        host,
+        imghost,
+        languageOverride: hl,
+        reCaptchaCompat,
+        reportapi,
+        sentry,
+        custom
+      } = this.props;
+      const mountParams = {
+        apihost,
+        assethost,
+        endpoint,
+        hl,
+        host,
+        imghost,
+        recaptchacompat: reCaptchaCompat === false? "off" : null,
+        reportapi,
+        sentry,
+        custom
+      };
+
+      mountCaptchaScript(mountParams)
+        .then(this.handleOnLoad)
+        .catch(this.handleError);
+      this.apiScriptRequested = true;
+    }
+
     renderCaptcha(onReady) {
@@ -140,0 +168,0 @@ const { isApiReady } = this.state;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45128

increased by1.92%

Lines of code

961

increased by5.72%

No dependency changes