@hcaptcha/react-hcaptcha 1.11.0 → 1.11.2

package/README.md

@@ -192,9 +192,16 @@ Please note that "invisible" simply means that no hCaptcha button will be render
 3. #### Make sure you are using `reCaptchaCompat=false` if you have the reCAPTCHA JS loaded on the same page.
     The hCaptcha "compatibility mode" will interfere with reCAPTCHA, as it adds properties with the same name. If for any reason you are running both hCaptcha and reCAPTCHA in parallel (we recommend only running hCaptcha) then please disable our compatibility mode.
 
-4. #### Avoid conflicts with legacy Sentry package usage on react-hcaptcha 1.9.0+
-    If you are using Sentry 7.x in your React app, this can conflict with the upstream `hcaptcha-loader` package's Sentry error tracing. You can avoid this issue by setting the `sentry` prop to `false`.
 
+### Sentry
+
+If the `sentry` flag is enabled, the upstream `hcaptcha-loader` package expects the Sentry SDK, version 8.x or later.
+
+If you have an older `@sentry/browser` client version on your site, it may take precedence over the bundled version. In this case you may see a console error like "g.setPropagationContext is not a function" due to the hcaptcha-loader trying to call methods only available on newer Sentry clients.
+
+To resolve this, update the version of the Sentry client you are including on your site to 8.x or higher.
+
+You can avoid this issue by setting the `sentry` prop to `false`.
 
 
 ---

package/dist/esm/index.js

@@ -37,11 +37,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
     _this.sentryHub = null;
+    _this.captchaId = '';
     _this.state = {
       isApiReady: false,
       isRemoved: false,
-      elementId: props.id,
-      captchaId: ''
+      elementId: props.id
     };
     return _this;
   }
@@ -75,8 +75,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     this.loadCaptcha();
   };
   _proto.componentWillUnmount = function componentWillUnmount() {
-    var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
     if (!this.isReady()) {
       return;
     }
@@ -154,10 +154,16 @@ 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 onReady = this.props.onReady;
     var isApiReady = this.state.isApiReady;
-    if (!isApiReady) return;
+    var captchaId = this.captchaId;
+
+    // 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,18 +177,19 @@ 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.captchaId = id;
     this.setState({
-      isRemoved: false,
-      captchaId: captchaId
+      isRemoved: false
     }, function () {
+      onRender && onRender();
       onReady && onReady();
-      _this4._onReady && _this4._onReady(captchaId);
+      _this4._onReady && _this4._onReady(id);
     });
   };
   _proto.resetCaptcha = function resetCaptcha() {
-    var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
     if (!this.isReady()) {
       return;
     }
@@ -194,8 +201,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     });
   };
   _proto.removeCaptcha = function removeCaptcha(callback) {
-    var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
     if (!this.isReady()) {
       return;
     }
@@ -234,10 +241,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 isRemoved = this.state.isRemoved;
     var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
     if (typeof hcaptcha === 'undefined' || isRemoved) return;
     var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
     var ekey = hcaptcha.getRespKey(captchaId); //Get current challenge session id from hCaptcha widget
@@ -245,8 +251,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
   _proto.handleExpire = function handleExpire() {
     var onExpire = this.props.onExpire;
-    var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
     if (!this.isReady()) {
       return;
     }
@@ -260,8 +266,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
   _proto.handleError = function handleError(event) {
     var onError = this.props.onError;
-    var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
     if (this.isReady()) {
       // If hCaptcha runs into error, reset captcha - hCaptcha
       hcaptcha.reset(captchaId);
@@ -269,9 +275,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$state = this.state,
+      isApiReady = _this$state.isApiReady,
+      isRemoved = _this$state.isRemoved;
     return isApiReady && !isRemoved;
   };
   _proto.handleOpen = function handleOpen() {
@@ -299,8 +305,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }
     opts = typeof opts === 'object' ? opts : null;
     try {
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         var _opts;
         var onReady = new Promise(function (resolve, reject) {
@@ -328,9 +334,17 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       return null;
     }
   };
+  _proto.close = function close() {
+    var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
+    if (!this.isReady()) {
+      return;
+    }
+    return hcaptcha.close(captchaId);
+  };
   _proto.setData = function setData(data) {
-    var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
     if (!this.isReady()) {
       return;
     }
@@ -341,11 +355,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
   _proto.getResponse = function getResponse() {
     var hcaptcha = this._hcaptcha;
-    return hcaptcha.getResponse(this.state.captchaId);
+    return hcaptcha.getResponse(this.captchaId);
   };
   _proto.getRespKey = function getRespKey() {
     var hcaptcha = this._hcaptcha;
-    return hcaptcha.getRespKey(this.state.captchaId);
+    return hcaptcha.getRespKey(this.captchaId);
   };
   _proto.render = function render() {
     var elementId = this.state.elementId;

package/dist/index.js

@@ -55,11 +55,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
     _this.sentryHub = null;
+    _this.captchaId = '';
     _this.state = {
       isApiReady: false,
       isRemoved: false,
-      elementId: props.id,
-      captchaId: ''
+      elementId: props.id
     };
     return _this;
   }
@@ -96,8 +96,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         return;
       }
@@ -183,10 +183,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderCaptcha",
-    value: function renderCaptcha(onReady) {
+    value: function renderCaptcha(onRender) {
       var _this4 = this;
+      var onReady = this.props.onReady;
       var isApiReady = this.state.isApiReady;
-      if (!isApiReady) return;
+      var captchaId = this.captchaId;
+
+      // 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,20 +206,21 @@ 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.captchaId = id;
       this.setState({
-        isRemoved: false,
-        captchaId: captchaId
+        isRemoved: false
       }, function () {
+        onRender && onRender();
         onReady && onReady();
-        _this4._onReady && _this4._onReady(captchaId);
+        _this4._onReady && _this4._onReady(id);
       });
     }
   }, {
     key: "resetCaptcha",
     value: function resetCaptcha() {
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         return;
       }
@@ -227,8 +234,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "removeCaptcha",
     value: function removeCaptcha(callback) {
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         return;
       }
@@ -271,10 +278,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 isRemoved = this.state.isRemoved;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (typeof hcaptcha === 'undefined' || isRemoved) return;
       var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
       var ekey = hcaptcha.getRespKey(captchaId); //Get current challenge session id from hCaptcha widget
@@ -284,8 +290,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "handleExpire",
     value: function handleExpire() {
       var onExpire = this.props.onExpire;
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         return;
       }
@@ -301,8 +307,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "handleError",
     value: function handleError(event) {
       var onError = this.props.onError;
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (this.isReady()) {
         // If hCaptcha runs into error, reset captcha - hCaptcha
         hcaptcha.reset(captchaId);
@@ -312,9 +318,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$state = this.state,
+        isApiReady = _this$state.isApiReady,
+        isRemoved = _this$state.isRemoved;
       return isApiReady && !isRemoved;
     }
   }, {
@@ -348,8 +354,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       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;
+        var captchaId = this.captchaId;
         if (!this.isReady()) {
           var _opts;
           var onReady = new Promise(function (resolve, reject) {
@@ -377,11 +383,21 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         return null;
       }
     }
+  }, {
+    key: "close",
+    value: function close() {
+      var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
+      if (!this.isReady()) {
+        return;
+      }
+      return hcaptcha.close(captchaId);
+    }
   }, {
     key: "setData",
     value: function setData(data) {
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         return;
       }
@@ -394,13 +410,13 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "getResponse",
     value: function getResponse() {
       var hcaptcha = this._hcaptcha;
-      return hcaptcha.getResponse(this.state.captchaId);
+      return hcaptcha.getResponse(this.captchaId);
     }
   }, {
     key: "getRespKey",
     value: function getRespKey() {
       var hcaptcha = this._hcaptcha;
-      return hcaptcha.getRespKey(this.state.captchaId);
+      return hcaptcha.getRespKey(this.captchaId);
     }
   }, {
     key: "render",

package/package.json

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

package/src/index.js

@@ -37,12 +37,12 @@ class HCaptcha extends React.Component {
       this.ref = React.createRef();
       this.apiScriptRequested = false;
       this.sentryHub = null;
+      this.captchaId = '';
 
       this.state = {
         isApiReady: false,
         isRemoved: false,
         elementId: props.id,
-        captchaId: ''
       }
     }
 
@@ -82,8 +82,8 @@ class HCaptcha extends React.Component {
     }
 
     componentWillUnmount() {
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (!this.isReady()) {
         return;
@@ -170,9 +170,15 @@ class HCaptcha extends React.Component {
       this.apiScriptRequested = true;
     }
 
-    renderCaptcha(onReady) {
+    renderCaptcha(onRender) {
+      const { onReady } = this.props;
       const { isApiReady } = this.state;
-      if (!isApiReady) return;
+      const captchaId = this.captchaId;
+
+      // 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,17 +194,19 @@ 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.captchaId = id;
 
-      this.setState({ isRemoved: false, captchaId }, () => {
+      this.setState({ isRemoved: false }, () => {
+        onRender && onRender();
         onReady && onReady();
-        this._onReady && this._onReady(captchaId);
+        this._onReady && this._onReady(id);
       });
     }
 
     resetCaptcha() {
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (!this.isReady()) {
         return;
@@ -213,8 +221,8 @@ class HCaptcha extends React.Component {
     }
 
     removeCaptcha(callback) {
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (!this.isReady()) {
         return;
@@ -256,8 +264,9 @@ class HCaptcha extends React.Component {
 
     handleSubmit (event) {
       const { onVerify } = this.props;
-      const { isRemoved, captchaId } = this.state;
+      const { isRemoved } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (typeof hcaptcha === 'undefined' || isRemoved) return
 
@@ -268,8 +277,8 @@ class HCaptcha extends React.Component {
 
     handleExpire () {
       const { onExpire } = this.props;
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (!this.isReady()) {
         return;
@@ -287,8 +296,8 @@ class HCaptcha extends React.Component {
 
     handleError (event) {
       const { onError } = this.props;
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (this.isReady()) {
         // If hCaptcha runs into error, reset captcha - hCaptcha
@@ -333,8 +342,8 @@ class HCaptcha extends React.Component {
       opts = typeof opts === 'object' ? opts : null;
 
       try {
-        const { captchaId } = this.state;
         const hcaptcha = this._hcaptcha;
+        const captchaId = this.captchaId;
         
         if (!this.isReady()) {
           const onReady = new Promise((resolve, reject) => {
@@ -367,9 +376,20 @@ class HCaptcha extends React.Component {
       }
     }
 
+    close() {
+      const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
+
+      if (!this.isReady()) {
+        return;
+      }
+
+      return hcaptcha.close(captchaId);
+    }
+
     setData (data) {
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (!this.isReady()) {
         return;
@@ -384,12 +404,12 @@ class HCaptcha extends React.Component {
 
     getResponse() {
       const hcaptcha = this._hcaptcha;
-      return hcaptcha.getResponse(this.state.captchaId);
+      return hcaptcha.getResponse(this.captchaId);
     }
 
     getRespKey() {
       const hcaptcha = this._hcaptcha;
-      return hcaptcha.getRespKey(this.state.captchaId)
+      return hcaptcha.getRespKey(this.captchaId)
     }
 
     render () {