@hcaptcha/react-hcaptcha 1.11.0 → 1.11.1

package/dist/esm/index.js

@@ -154,10 +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) {
+  _proto.renderCaptcha = function renderCaptcha(onRender) {
     var _this4 = this;
-    var isApiReady = this.state.isApiReady;
-    if (!isApiReady) return;
+    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,
@@ -171,13 +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(captchaId);
+      _this4._onReady && _this4._onReady(id);
     });
   };
   _proto.resetCaptcha = function resetCaptcha() {
@@ -234,9 +242,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
   _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
@@ -269,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() {
@@ -328,6 +336,14 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       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;
     var hcaptcha = this._hcaptcha;

package/dist/index.js

@@ -183,10 +183,17 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderCaptcha",
-    value: function renderCaptcha(onReady) {
+    value: function renderCaptcha(onRender) {
       var _this4 = this;
-      var isApiReady = this.state.isApiReady;
-      if (!isApiReady) return;
+      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,
@@ -200,13 +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(captchaId);
+        _this4._onReady && _this4._onReady(id);
       });
     }
   }, {
@@ -271,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
@@ -312,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;
     }
   }, {
@@ -377,6 +385,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         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",
     value: function setData(data) {

package/package.json

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

package/src/index.js

@@ -170,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,
@@ -188,11 +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(captchaId);
+        this._onReady && this._onReady(id);
       });
     }
 
@@ -367,6 +373,17 @@ class HCaptcha extends React.Component {
       }
     }
 
+    close() {
+      const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
+
+      if (!this.isReady()) {
+        return;
+      }
+
+      return hcaptcha.close(captchaId);
+    }
+
     setData (data) {
       const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;