@hcaptcha/react-hcaptcha 1.4.2 → 1.4.3

package/dist/esm/index.js

@@ -54,6 +54,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.removeCaptcha = _this.removeCaptcha.bind(_assertThisInitialized(_this));
     _this.isReady = _this.isReady.bind(_assertThisInitialized(_this)); // Event Handlers
 
+    _this.loadCaptcha = _this.loadCaptcha.bind(_assertThisInitialized(_this));
     _this.handleOnLoad = _this.handleOnLoad.bind(_assertThisInitialized(_this));
     _this.handleSubmit = _this.handleSubmit.bind(_assertThisInitialized(_this));
     _this.handleExpire = _this.handleExpire.bind(_assertThisInitialized(_this));
@@ -63,6 +64,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind(_assertThisInitialized(_this));
     var isApiReady = typeof hcaptcha !== 'undefined';
     _this.ref = /*#__PURE__*/React.createRef();
+    _this.apiScriptRequested = false;
     _this.state = {
       isApiReady: isApiReady,
       isRemoved: false,
@@ -76,38 +78,19 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
   _proto.componentDidMount = function componentDidMount() {
     // 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();
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -148,6 +131,38 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }
   };
 
+  _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) {
     var isApiReady = this.state.isApiReady;
     if (!isApiReady) return;

package/dist/index.js

@@ -84,6 +84,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.removeCaptcha = _this.removeCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.isReady = _this.isReady.bind((0, _assertThisInitialized2["default"])(_this)); // Event Handlers
 
+    _this.loadCaptcha = _this.loadCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleOnLoad = _this.handleOnLoad.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleSubmit = _this.handleSubmit.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleExpire = _this.handleExpire.bind((0, _assertThisInitialized2["default"])(_this));
@@ -93,6 +94,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind((0, _assertThisInitialized2["default"])(_this));
     var isApiReady = typeof hcaptcha !== 'undefined';
     _this.ref = /*#__PURE__*/React.createRef();
+    _this.apiScriptRequested = false;
     _this.state = {
       isApiReady: isApiReady,
       isRemoved: false,
@@ -106,38 +108,19 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       // 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();
     }
   }, {
     key: "componentWillUnmount",
@@ -180,6 +163,39 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         });
       }
     }
+  }, {
+    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",
     value: function renderCaptcha(onReady) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",

package/src/index.js

@@ -50,6 +50,7 @@ class HCaptcha extends React.Component {
       this.isReady = this.isReady.bind(this);
 
       // Event Handlers
+      this.loadCaptcha = this.loadCaptcha.bind(this);
       this.handleOnLoad = this.handleOnLoad.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
       this.handleExpire = this.handleExpire.bind(this);
@@ -61,6 +62,7 @@ class HCaptcha extends React.Component {
       const isApiReady = typeof hcaptcha !== 'undefined';
 
       this.ref = React.createRef();
+      this.apiScriptRequested = false;
 
       this.state = {
         isApiReady,
@@ -71,42 +73,32 @@ class HCaptcha extends React.Component {
     }
 
     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
-        };
-
-        // Only create the script tag once, use a global promise to track
-        mountCaptchaScript(mountParams)
-          .then(this.handleOnLoad)
-          .catch(this.handleError);
-      } else {
+      /*
+       * 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();
+
+        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);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -132,6 +124,42 @@ class HCaptcha extends React.Component {
       }
     }
 
+    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) {
       const { isApiReady } = this.state;
       if (!isApiReady) return;