@hcaptcha/react-hcaptcha 1.11.1 → 1.11.3

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;
     }
@@ -156,10 +156,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
   _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;
+    var isApiReady = this.state.isApiReady;
+    var captchaId = this.captchaId;
 
     // Prevent calling hCaptcha render on two conditions:
     // • API is not ready
@@ -179,9 +178,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     var hcaptcha = this._hcaptcha;
     //Render hCaptcha widget and provide necessary callbacks - hCaptcha
     var id = hcaptcha.render(this.ref.current, renderParams);
+    this.captchaId = id;
     this.setState({
-      isRemoved: false,
-      captchaId: id
+      isRemoved: false
     }, function () {
       onRender && onRender();
       onReady && onReady();
@@ -189,8 +188,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     });
   };
   _proto.resetCaptcha = function resetCaptcha() {
-    var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
     if (!this.isReady()) {
       return;
     }
@@ -202,14 +201,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     });
   };
   _proto.removeCaptcha = function removeCaptcha(callback) {
-    var captchaId = this.state.captchaId;
+    var _this5 = this;
     var hcaptcha = this._hcaptcha;
+    var captchaId = this.captchaId;
     if (!this.isReady()) {
       return;
     }
     this.setState({
       isRemoved: true
     }, function () {
+      _this5.captchaId = '';
       hcaptcha.remove(captchaId);
       callback && callback();
     });
@@ -219,33 +220,32 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     });
   };
   _proto.handleOnLoad = function handleOnLoad() {
-    var _this5 = this;
+    var _this6 = this;
     this.setState({
       isApiReady: true
     }, function () {
       try {
-        var element = getMountElement(_this5.props.scriptLocation);
+        var element = getMountElement(_this6.props.scriptLocation);
         var frame = getFrame(element);
-        _this5._hcaptcha = frame.window.hcaptcha;
+        _this6._hcaptcha = frame.window.hcaptcha;
 
         // render captcha and wait for captcha id
-        _this5.renderCaptcha(function () {
+        _this6.renderCaptcha(function () {
           // trigger onLoad if it exists
 
-          var onLoad = _this5.props.onLoad;
+          var onLoad = _this6.props.onLoad;
           if (onLoad) onLoad();
         });
       } catch (error) {
-        _this5.sentryHub.captureException(error);
+        _this6.sentryHub.captureException(error);
       }
     });
   };
   _proto.handleSubmit = function handleSubmit(event) {
     var onVerify = this.props.onVerify;
-    var _this$state2 = this.state,
-      isRemoved = _this$state2.isRemoved,
-      captchaId = _this$state2.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
@@ -253,8 +253,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;
     }
@@ -268,8 +268,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);
@@ -277,9 +277,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     if (onError) onError(event);
   };
   _proto.isReady = function isReady() {
-    var _this$state3 = this.state,
-      isApiReady = _this$state3.isApiReady,
-      isRemoved = _this$state3.isRemoved;
+    var _this$state = this.state,
+      isApiReady = _this$state.isApiReady,
+      isRemoved = _this$state.isRemoved;
     return isApiReady && !isRemoved;
   };
   _proto.handleOpen = function handleOpen() {
@@ -301,20 +301,20 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     this.props.onChalExpired();
   };
   _proto.execute = function execute(opts) {
-    var _this6 = this;
+    var _this7 = this;
     if (opts === void 0) {
       opts = null;
     }
     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) {
-          _this6._onReady = function (id) {
+          _this7._onReady = function (id) {
             try {
-              var _hcaptcha = _this6._hcaptcha;
+              var _hcaptcha = _this7._hcaptcha;
               if (opts && opts.async) {
                 _hcaptcha.execute(id, opts).then(resolve)["catch"](reject);
               } else {
@@ -337,16 +337,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     }
   };
   _proto.close = function close() {
-    var captchaId = this.state.captchaId;
     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;
     }
@@ -357,11 +357,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;
       }
@@ -185,10 +185,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "renderCaptcha",
     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;
+      var isApiReady = this.state.isApiReady;
+      var captchaId = this.captchaId;
 
       // Prevent calling hCaptcha render on two conditions:
       // • API is not ready
@@ -208,9 +207,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var hcaptcha = this._hcaptcha;
       //Render hCaptcha widget and provide necessary callbacks - hCaptcha
       var id = hcaptcha.render(this.ref.current, renderParams);
+      this.captchaId = id;
       this.setState({
-        isRemoved: false,
-        captchaId: id
+        isRemoved: false
       }, function () {
         onRender && onRender();
         onReady && onReady();
@@ -220,8 +219,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "resetCaptcha",
     value: function resetCaptcha() {
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         return;
       }
@@ -235,14 +234,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "removeCaptcha",
     value: function removeCaptcha(callback) {
-      var captchaId = this.state.captchaId;
+      var _this5 = this;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         return;
       }
       this.setState({
         isRemoved: true
       }, function () {
+        _this5.captchaId = '';
         hcaptcha.remove(captchaId);
         callback && callback();
       });
@@ -254,24 +255,24 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleOnLoad",
     value: function handleOnLoad() {
-      var _this5 = this;
+      var _this6 = this;
       this.setState({
         isApiReady: true
       }, function () {
         try {
-          var element = (0, _utils.getMountElement)(_this5.props.scriptLocation);
+          var element = (0, _utils.getMountElement)(_this6.props.scriptLocation);
           var frame = (0, _utils.getFrame)(element);
-          _this5._hcaptcha = frame.window.hcaptcha;
+          _this6._hcaptcha = frame.window.hcaptcha;
 
           // render captcha and wait for captcha id
-          _this5.renderCaptcha(function () {
+          _this6.renderCaptcha(function () {
             // trigger onLoad if it exists
 
-            var onLoad = _this5.props.onLoad;
+            var onLoad = _this6.props.onLoad;
             if (onLoad) onLoad();
           });
         } catch (error) {
-          _this5.sentryHub.captureException(error);
+          _this6.sentryHub.captureException(error);
         }
       });
     }
@@ -279,10 +280,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     key: "handleSubmit",
     value: function handleSubmit(event) {
       var onVerify = this.props.onVerify;
-      var _this$state2 = this.state,
-        isRemoved = _this$state2.isRemoved,
-        captchaId = _this$state2.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
@@ -292,8 +292,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;
       }
@@ -309,8 +309,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);
@@ -320,9 +320,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "isReady",
     value: function isReady() {
-      var _this$state3 = this.state,
-        isApiReady = _this$state3.isApiReady,
-        isRemoved = _this$state3.isRemoved;
+      var _this$state = this.state,
+        isApiReady = _this$state.isApiReady,
+        isRemoved = _this$state.isRemoved;
       return isApiReady && !isRemoved;
     }
   }, {
@@ -352,18 +352,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "execute",
     value: function execute() {
-      var _this6 = this;
+      var _this7 = 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;
+        var captchaId = this.captchaId;
         if (!this.isReady()) {
           var _opts;
           var onReady = new Promise(function (resolve, reject) {
-            _this6._onReady = function (id) {
+            _this7._onReady = function (id) {
               try {
-                var _hcaptcha = _this6._hcaptcha;
+                var _hcaptcha = _this7._hcaptcha;
                 if (opts && opts.async) {
                   _hcaptcha.execute(id, opts).then(resolve)["catch"](reject);
                 } else {
@@ -388,8 +388,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "close",
     value: function close() {
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         return;
       }
@@ -398,8 +398,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "setData",
     value: function setData(data) {
-      var captchaId = this.state.captchaId;
       var hcaptcha = this._hcaptcha;
+      var captchaId = this.captchaId;
       if (!this.isReady()) {
         return;
       }
@@ -412,13 +412,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.1",
+  "version": "1.11.3",
   "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;
@@ -171,8 +171,9 @@ class HCaptcha extends React.Component {
     }
 
     renderCaptcha(onRender) {
-      const { isApiReady, captchaId } = this.state;
       const { onReady } = this.props;
+      const { isApiReady } = this.state;
+      const captchaId = this.captchaId;
 
       // Prevent calling hCaptcha render on two conditions:
       // • API is not ready
@@ -194,8 +195,9 @@ class HCaptcha extends React.Component {
       const hcaptcha = this._hcaptcha;
       //Render hCaptcha widget and provide necessary callbacks - hCaptcha
       const id = hcaptcha.render(this.ref.current, renderParams);
+      this.captchaId = id;
 
-      this.setState({ isRemoved: false, captchaId: id }, () => {
+      this.setState({ isRemoved: false }, () => {
         onRender && onRender();
         onReady && onReady();
         this._onReady && this._onReady(id);
@@ -203,8 +205,8 @@ class HCaptcha extends React.Component {
     }
 
     resetCaptcha() {
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (!this.isReady()) {
         return;
@@ -219,14 +221,16 @@ class HCaptcha extends React.Component {
     }
 
     removeCaptcha(callback) {
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (!this.isReady()) {
         return;
       }
 
       this.setState({ isRemoved: true }, () => {
+        this.captchaId = '';
+
         hcaptcha.remove(captchaId);
         callback && callback()
       });
@@ -262,8 +266,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
 
@@ -274,8 +279,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;
@@ -293,8 +298,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
@@ -339,8 +344,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) => {
@@ -374,8 +379,8 @@ class HCaptcha extends React.Component {
     }
 
     close() {
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (!this.isReady()) {
         return;
@@ -385,8 +390,8 @@ class HCaptcha extends React.Component {
     }
 
     setData (data) {
-      const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;
+      const captchaId = this.captchaId;
 
       if (!this.isReady()) {
         return;
@@ -401,12 +406,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 () {