@hcaptcha/react-hcaptcha 1.10.3 → 1.11.1

package/dist/esm/index.js

@@ -23,6 +23,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.resetCaptcha = _this.resetCaptcha.bind(_assertThisInitialized(_this));
     _this.removeCaptcha = _this.removeCaptcha.bind(_assertThisInitialized(_this));
     _this.isReady = _this.isReady.bind(_assertThisInitialized(_this));
+    _this._onReady = null;
 
     // Event Handlers
     _this.loadCaptcha = _this.loadCaptcha.bind(_assertThisInitialized(_this));
@@ -153,9 +154,17 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     hCaptchaLoader(mountParams).then(this.handleOnLoad, this.handleError)["catch"](this.handleError);
     this.apiScriptRequested = true;
   };
-  _proto.renderCaptcha = function renderCaptcha(onReady) {
-    var isApiReady = this.state.isApiReady;
-    if (!isApiReady) return;
+  _proto.renderCaptcha = function renderCaptcha(onRender) {
+    var _this4 = this;
+    var _this$state = this.state,
+      isApiReady = _this$state.isApiReady,
+      captchaId = _this$state.captchaId;
+    var onReady = this.props.onReady;
+
+    // Prevent calling hCaptcha render on two conditions:
+    // • API is not ready
+    // • Component has already been mounted
+    if (!isApiReady || captchaId) return;
     var renderParams = Object.assign({
       "open-callback": this.handleOpen,
       "close-callback": this.handleClose,
@@ -169,12 +178,14 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     });
     var hcaptcha = this._hcaptcha;
     //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-    var captchaId = hcaptcha.render(this.ref.current, renderParams);
+    var id = hcaptcha.render(this.ref.current, renderParams);
     this.setState({
       isRemoved: false,
-      captchaId: captchaId
+      captchaId: id
     }, function () {
+      onRender && onRender();
       onReady && onReady();
+      _this4._onReady && _this4._onReady(id);
     });
   };
   _proto.resetCaptcha = function resetCaptcha() {
@@ -208,32 +219,32 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     });
   };
   _proto.handleOnLoad = function handleOnLoad() {
-    var _this4 = this;
+    var _this5 = this;
     this.setState({
       isApiReady: true
     }, function () {
       try {
-        var element = getMountElement(_this4.props.scriptLocation);
+        var element = getMountElement(_this5.props.scriptLocation);
         var frame = getFrame(element);
-        _this4._hcaptcha = frame.window.hcaptcha;
+        _this5._hcaptcha = frame.window.hcaptcha;
 
         // render captcha and wait for captcha id
-        _this4.renderCaptcha(function () {
+        _this5.renderCaptcha(function () {
           // trigger onLoad if it exists
 
-          var onLoad = _this4.props.onLoad;
+          var onLoad = _this5.props.onLoad;
           if (onLoad) onLoad();
         });
       } catch (error) {
-        _this4.sentryHub.captureException(error);
+        _this5.sentryHub.captureException(error);
       }
     });
   };
   _proto.handleSubmit = function handleSubmit(event) {
     var onVerify = this.props.onVerify;
-    var _this$state = this.state,
-      isRemoved = _this$state.isRemoved,
-      captchaId = _this$state.captchaId;
+    var _this$state2 = this.state,
+      isRemoved = _this$state2.isRemoved,
+      captchaId = _this$state2.captchaId;
     var hcaptcha = this._hcaptcha;
     if (typeof hcaptcha === 'undefined' || isRemoved) return;
     var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
@@ -266,9 +277,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     if (onError) onError(event);
   };
   _proto.isReady = function isReady() {
-    var _this$state2 = this.state,
-      isApiReady = _this$state2.isApiReady,
-      isRemoved = _this$state2.isRemoved;
+    var _this$state3 = this.state,
+      isApiReady = _this$state3.isApiReady,
+      isRemoved = _this$state3.isRemoved;
     return isApiReady && !isRemoved;
   };
   _proto.handleOpen = function handleOpen() {
@@ -290,22 +301,48 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     this.props.onChalExpired();
   };
   _proto.execute = function execute(opts) {
+    var _this6 = this;
     if (opts === void 0) {
       opts = null;
     }
+    opts = typeof opts === 'object' ? opts : null;
     try {
       var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
       if (!this.isReady()) {
-        return;
-      }
-      if (opts && typeof opts !== "object") {
-        opts = null;
+        var _opts;
+        var onReady = new Promise(function (resolve, reject) {
+          _this6._onReady = function (id) {
+            try {
+              var _hcaptcha = _this6._hcaptcha;
+              if (opts && opts.async) {
+                _hcaptcha.execute(id, opts).then(resolve)["catch"](reject);
+              } else {
+                resolve(_hcaptcha.execute(id, opts));
+              }
+            } catch (e) {
+              reject(e);
+            }
+          };
+        });
+        return (_opts = opts) != null && _opts.async ? onReady : null;
       }
       return hcaptcha.execute(captchaId, opts);
     } catch (error) {
       this.sentryHub.captureException(error);
+      if (opts && opts.async) {
+        return Promise.reject(error);
+      }
+      return null;
+    }
+  };
+  _proto.close = function close() {
+    var captchaId = this.state.captchaId;
+    var hcaptcha = this._hcaptcha;
+    if (!this.isReady()) {
+      return;
     }
+    return hcaptcha.close(captchaId);
   };
   _proto.setData = function setData(data) {
     var captchaId = this.state.captchaId;

package/dist/index.js

@@ -41,6 +41,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.resetCaptcha = _this.resetCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.removeCaptcha = _this.removeCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.isReady = _this.isReady.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._onReady = null;
 
     // Event Handlers
     _this.loadCaptcha = _this.loadCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
@@ -182,9 +183,17 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderCaptcha",
-    value: function renderCaptcha(onReady) {
-      var isApiReady = this.state.isApiReady;
-      if (!isApiReady) return;
+    value: function renderCaptcha(onRender) {
+      var _this4 = this;
+      var _this$state = this.state,
+        isApiReady = _this$state.isApiReady,
+        captchaId = _this$state.captchaId;
+      var onReady = this.props.onReady;
+
+      // Prevent calling hCaptcha render on two conditions:
+      // • API is not ready
+      // • Component has already been mounted
+      if (!isApiReady || captchaId) return;
       var renderParams = Object.assign({
         "open-callback": this.handleOpen,
         "close-callback": this.handleClose,
@@ -198,12 +207,14 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       });
       var hcaptcha = this._hcaptcha;
       //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-      var captchaId = hcaptcha.render(this.ref.current, renderParams);
+      var id = hcaptcha.render(this.ref.current, renderParams);
       this.setState({
         isRemoved: false,
-        captchaId: captchaId
+        captchaId: id
       }, function () {
+        onRender && onRender();
         onReady && onReady();
+        _this4._onReady && _this4._onReady(id);
       });
     }
   }, {
@@ -243,24 +254,24 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleOnLoad",
     value: function handleOnLoad() {
-      var _this4 = this;
+      var _this5 = this;
       this.setState({
         isApiReady: true
       }, function () {
         try {
-          var element = (0, _utils.getMountElement)(_this4.props.scriptLocation);
+          var element = (0, _utils.getMountElement)(_this5.props.scriptLocation);
           var frame = (0, _utils.getFrame)(element);
-          _this4._hcaptcha = frame.window.hcaptcha;
+          _this5._hcaptcha = frame.window.hcaptcha;
 
           // render captcha and wait for captcha id
-          _this4.renderCaptcha(function () {
+          _this5.renderCaptcha(function () {
             // trigger onLoad if it exists
 
-            var onLoad = _this4.props.onLoad;
+            var onLoad = _this5.props.onLoad;
             if (onLoad) onLoad();
           });
         } catch (error) {
-          _this4.sentryHub.captureException(error);
+          _this5.sentryHub.captureException(error);
         }
       });
     }
@@ -268,9 +279,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "handleSubmit",
     value: function handleSubmit(event) {
       var onVerify = this.props.onVerify;
-      var _this$state = this.state,
-        isRemoved = _this$state.isRemoved,
-        captchaId = _this$state.captchaId;
+      var _this$state2 = this.state,
+        isRemoved = _this$state2.isRemoved,
+        captchaId = _this$state2.captchaId;
       var hcaptcha = this._hcaptcha;
       if (typeof hcaptcha === 'undefined' || isRemoved) return;
       var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
@@ -309,9 +320,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "isReady",
     value: function isReady() {
-      var _this$state2 = this.state,
-        isApiReady = _this$state2.isApiReady,
-        isRemoved = _this$state2.isRemoved;
+      var _this$state3 = this.state,
+        isApiReady = _this$state3.isApiReady,
+        isRemoved = _this$state3.isRemoved;
       return isApiReady && !isRemoved;
     }
   }, {
@@ -341,20 +352,48 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "execute",
     value: function execute() {
+      var _this6 = this;
       var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      opts = (0, _typeof2["default"])(opts) === 'object' ? opts : null;
       try {
         var captchaId = this.state.captchaId;
         var hcaptcha = this._hcaptcha;
         if (!this.isReady()) {
-          return;
-        }
-        if (opts && (0, _typeof2["default"])(opts) !== "object") {
-          opts = null;
+          var _opts;
+          var onReady = new Promise(function (resolve, reject) {
+            _this6._onReady = function (id) {
+              try {
+                var _hcaptcha = _this6._hcaptcha;
+                if (opts && opts.async) {
+                  _hcaptcha.execute(id, opts).then(resolve)["catch"](reject);
+                } else {
+                  resolve(_hcaptcha.execute(id, opts));
+                }
+              } catch (e) {
+                reject(e);
+              }
+            };
+          });
+          return (_opts = opts) !== null && _opts !== void 0 && _opts.async ? onReady : null;
         }
         return hcaptcha.execute(captchaId, opts);
       } catch (error) {
         this.sentryHub.captureException(error);
+        if (opts && opts.async) {
+          return Promise.reject(error);
+        }
+        return null;
+      }
+    }
+  }, {
+    key: "close",
+    value: function close() {
+      var captchaId = this.state.captchaId;
+      var hcaptcha = this._hcaptcha;
+      if (!this.isReady()) {
+        return;
       }
+      return hcaptcha.close(captchaId);
     }
   }, {
     key: "setData",

package/package.json

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

package/src/index.js

@@ -22,6 +22,7 @@ class HCaptcha extends React.Component {
       this.resetCaptcha  = this.resetCaptcha.bind(this);
       this.removeCaptcha = this.removeCaptcha.bind(this);
       this.isReady = this.isReady.bind(this);
+      this._onReady = null;
 
       // Event Handlers
       this.loadCaptcha = this.loadCaptcha.bind(this);
@@ -169,9 +170,14 @@ class HCaptcha extends React.Component {
       this.apiScriptRequested = true;
     }
 
-    renderCaptcha(onReady) {
-      const { isApiReady } = this.state;
-      if (!isApiReady) return;
+    renderCaptcha(onRender) {
+      const { isApiReady, captchaId } = this.state;
+      const { onReady } = this.props;
+
+      // Prevent calling hCaptcha render on two conditions:
+      // • API is not ready
+      // • Component has already been mounted
+      if (!isApiReady || captchaId) return;
 
       const renderParams = Object.assign({
         "open-callback"       : this.handleOpen,
@@ -187,10 +193,12 @@ class HCaptcha extends React.Component {
 
       const hcaptcha = this._hcaptcha;
       //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-      const captchaId = hcaptcha.render(this.ref.current, renderParams);
+      const id = hcaptcha.render(this.ref.current, renderParams);
 
-      this.setState({ isRemoved: false, captchaId }, () => {
+      this.setState({ isRemoved: false, captchaId: id }, () => {
+        onRender && onRender();
         onReady && onReady();
+        this._onReady && this._onReady(id);
       });
     }
 
@@ -230,7 +238,7 @@ class HCaptcha extends React.Component {
       });
     }
 
-  handleOnLoad () {
+    handleOnLoad () {
       this.setState({ isApiReady: true }, () => {
         try {
           const element = getMountElement(this.props.scriptLocation);
@@ -327,23 +335,53 @@ class HCaptcha extends React.Component {
     }
 
     execute (opts = null) {
+
+      opts = typeof opts === 'object' ? opts : null;
+
       try {
         const { captchaId } = this.state;
         const hcaptcha = this._hcaptcha;
-
-
+        
         if (!this.isReady()) {
-            return;
-        }
-
-        if (opts && typeof opts !== "object") {
-            opts = null;
+          const onReady = new Promise((resolve, reject) => {
+            
+            this._onReady = (id) => {
+              try {
+                const hcaptcha = this._hcaptcha;
+                
+                if (opts && opts.async) {
+                  hcaptcha.execute(id, opts).then(resolve).catch(reject);
+                } else {
+                  resolve(hcaptcha.execute(id, opts));
+                }
+              } catch (e) {
+                reject(e);
+              }
+            };
+          });
+    
+          return opts?.async ? onReady : null;
         }
-
+        
         return hcaptcha.execute(captchaId, opts);
       } catch (error) {
-          this.sentryHub.captureException(error);
+        this.sentryHub.captureException(error);
+        if (opts && opts.async) {
+          return Promise.reject(error);
+        }
+        return null;
+      }
+    }
+
+    close() {
+      const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
+
+      if (!this.isReady()) {
+        return;
       }
+
+      return hcaptcha.close(captchaId);
     }
 
     setData (data) {