@hcaptcha/react-hcaptcha 1.8.0 → 1.8.1

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import * as React from 'react';
-import { generateQuery, getFrame, getMountElement } from "./utils.js";
+import { generateQuery, getFrame, getMountElement } from './utils.js';
 var SCRIPT_ID = 'hcaptcha-api-script-id';
 var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
 
@@ -58,8 +58,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
-    var element = getMountElement(_this.props.scriptLocation);
-    var frame = getFrame(element);
     /**
      * Internal reference to track hCaptcha API
      *
@@ -67,7 +65,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
      * not where the script and iFrames have been loaded.
      */
 
-    _this._hcaptcha = frame.window.hcaptcha || undefined; // API Methods
+    _this._hcaptcha = undefined; // API Methods
 
     _this.renderCaptcha = _this.renderCaptcha.bind(_assertThisInitialized(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind(_assertThisInitialized(_this));
@@ -82,11 +80,10 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleOpen = _this.handleOpen.bind(_assertThisInitialized(_this));
     _this.handleClose = _this.handleClose.bind(_assertThisInitialized(_this));
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind(_assertThisInitialized(_this));
-    var isApiReady = typeof _this._hcaptcha !== 'undefined';
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
     _this.state = {
-      isApiReady: isApiReady,
+      isApiReady: false,
       isRemoved: false,
       elementId: props.id,
       captchaId: ''
@@ -97,8 +94,13 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   var _proto = HCaptcha.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
+
     // Once captcha is mounted intialize hCaptcha - hCaptcha
-    var isApiReady = this.state.isApiReady;
+    var element = getMountElement(this.props.scriptLocation);
+    var frame = getFrame(element);
+    this._hcaptcha = frame.window.hcaptcha || undefined;
+    var isApiReady = typeof this._hcaptcha !== 'undefined';
     /*
      * Check if hCaptcha has already been loaded,
      * If Yes, render the captcha
@@ -106,7 +108,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
      */
 
     if (isApiReady) {
-      this.renderCaptcha();
+      this.setState({
+        isApiReady: true
+      }, function () {
+        _this2.renderCaptcha();
+      });
       return;
     }
 
@@ -136,18 +142,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var _this2 = this;
+    var _this3 = this;
 
     // Prop Keys that could change
     var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint']; // See if any props changed during component update
 
     var match = keys.every(function (key) {
-      return prevProps[key] === _this2.props[key];
+      return prevProps[key] === _this3.props[key];
     }); // If they have changed, remove current captcha and render a new one
 
     if (!match) {
       this.removeCaptcha(function () {
-        _this2.renderCaptcha();
+        _this3.renderCaptcha();
       });
     }
   };
@@ -242,18 +248,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.handleOnLoad = function handleOnLoad() {
-    var _this3 = this;
+    var _this4 = this;
 
     this.setState({
       isApiReady: true
     }, function () {
-      var element = getMountElement(_this3.props.scriptLocation);
+      var element = getMountElement(_this4.props.scriptLocation);
       var frame = getFrame(element);
-      _this3._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
+      _this4._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
 
-      _this3.renderCaptcha(function () {
+      _this4.renderCaptcha(function () {
         // trigger onLoad if it exists
-        var onLoad = _this3.props.onLoad;
+        var onLoad = _this4.props.onLoad;
         if (onLoad) onLoad();
       });
     });

package/dist/esm/utils.js

@@ -14,7 +14,7 @@ function generateQuery(params) {
 
 function getFrame(element) {
   var doc = element && element.ownerDocument || document;
-  var win = doc.defaultView || doc.parentWindow;
+  var win = doc.defaultView || doc.parentWindow || window;
   return {
     document: doc,
     window: win

package/dist/index.js

@@ -87,8 +87,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
 
     (0, _classCallCheck2["default"])(this, HCaptcha);
     _this = _super.call(this, props);
-    var element = (0, _utils.getMountElement)(_this.props.scriptLocation);
-    var frame = (0, _utils.getFrame)(element);
     /**
      * Internal reference to track hCaptcha API
      *
@@ -96,7 +94,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
      * not where the script and iFrames have been loaded.
      */
 
-    _this._hcaptcha = frame.window.hcaptcha || undefined; // API Methods
+    _this._hcaptcha = undefined; // API Methods
 
     _this.renderCaptcha = _this.renderCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind((0, _assertThisInitialized2["default"])(_this));
@@ -111,11 +109,10 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleOpen = _this.handleOpen.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2["default"])(_this));
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind((0, _assertThisInitialized2["default"])(_this));
-    var isApiReady = typeof _this._hcaptcha !== 'undefined';
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
     _this.state = {
-      isApiReady: isApiReady,
+      isApiReady: false,
       isRemoved: false,
       elementId: props.id,
       captchaId: ''
@@ -126,8 +123,13 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(HCaptcha, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+
       // Once captcha is mounted intialize hCaptcha - hCaptcha
-      var isApiReady = this.state.isApiReady;
+      var element = (0, _utils.getMountElement)(this.props.scriptLocation);
+      var frame = (0, _utils.getFrame)(element);
+      this._hcaptcha = frame.window.hcaptcha || undefined;
+      var isApiReady = typeof this._hcaptcha !== 'undefined';
       /*
        * Check if hCaptcha has already been loaded,
        * If Yes, render the captcha
@@ -135,7 +137,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
        */
 
       if (isApiReady) {
-        this.renderCaptcha();
+        this.setState({
+          isApiReady: true
+        }, function () {
+          _this2.renderCaptcha();
+        });
         return;
       }
 
@@ -168,18 +174,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
+      var _this3 = this;
 
       // Prop Keys that could change
       var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint']; // See if any props changed during component update
 
       var match = keys.every(function (key) {
-        return prevProps[key] === _this2.props[key];
+        return prevProps[key] === _this3.props[key];
       }); // If they have changed, remove current captcha and render a new one
 
       if (!match) {
         this.removeCaptcha(function () {
-          _this2.renderCaptcha();
+          _this3.renderCaptcha();
         });
       }
     }
@@ -279,18 +285,18 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleOnLoad",
     value: function handleOnLoad() {
-      var _this3 = this;
+      var _this4 = this;
 
       this.setState({
         isApiReady: true
       }, function () {
-        var element = (0, _utils.getMountElement)(_this3.props.scriptLocation);
+        var element = (0, _utils.getMountElement)(_this4.props.scriptLocation);
         var frame = (0, _utils.getFrame)(element);
-        _this3._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
+        _this4._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
 
-        _this3.renderCaptcha(function () {
+        _this4.renderCaptcha(function () {
           // trigger onLoad if it exists
-          var onLoad = _this3.props.onLoad;
+          var onLoad = _this4.props.onLoad;
           if (onLoad) onLoad();
         });
       });

package/dist/utils.js

@@ -31,7 +31,7 @@ function generateQuery(params) {
 
 function getFrame(element) {
   var doc = element && element.ownerDocument || document;
-  var win = doc.defaultView || doc.parentWindow;
+  var win = doc.defaultView || doc.parentWindow || window;
   return {
     document: doc,
     window: win

package/package.json

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

package/src/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { generateQuery, getFrame, getMountElement } from "./utils.js";
+import { generateQuery, getFrame, getMountElement } from './utils.js';
 
 const SCRIPT_ID = 'hcaptcha-api-script-id';
 const HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad';
@@ -8,7 +8,7 @@ const HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad';
 const scripts = [];
 
 // Generate hCaptcha API script
-const mountCaptchaScript = (params={}) => {
+const mountCaptchaScript = (params = {}) => {
   const element = getMountElement(params.scriptLocation);
   delete params.scriptLocation;
 
@@ -52,16 +52,13 @@ class HCaptcha extends React.Component {
     constructor (props) {
       super(props);
 
-      const element = getMountElement(this.props.scriptLocation);
-      const frame = getFrame(element);
-
       /**
        * Internal reference to track hCaptcha API
        *
        * Required as window is relative to initialization in application
        * not where the script and iFrames have been loaded.
        */
-      this._hcaptcha = frame.window.hcaptcha || undefined;
+      this._hcaptcha = undefined;
 
       // API Methods
       this.renderCaptcha = this.renderCaptcha.bind(this);
@@ -79,14 +76,11 @@ class HCaptcha extends React.Component {
       this.handleClose = this.handleClose.bind(this);
       this.handleChallengeExpired = this.handleChallengeExpired.bind(this);
 
-
-      const isApiReady = typeof this._hcaptcha !== 'undefined';
-
       this.ref = React.createRef();
       this.apiScriptRequested = false;
 
       this.state = {
-        isApiReady,
+        isApiReady: false,
         isRemoved: false,
         elementId: props.id,
         captchaId: ''
@@ -94,7 +88,11 @@ class HCaptcha extends React.Component {
     }
 
     componentDidMount () { // Once captcha is mounted intialize hCaptcha - hCaptcha
-      const { isApiReady } = this.state;
+      const element = getMountElement(this.props.scriptLocation);
+      const frame = getFrame(element);
+      this._hcaptcha = frame.window.hcaptcha || undefined;
+
+      const isApiReady = typeof this._hcaptcha !== 'undefined';
 
       /*
        * Check if hCaptcha has already been loaded,
@@ -102,7 +100,14 @@ class HCaptcha extends React.Component {
        * If No, create script tag and wait to render the captcha
        */
       if (isApiReady) {
-        this.renderCaptcha();
+        this.setState(
+          {
+            isApiReady: true
+          },
+          () => {
+            this.renderCaptcha();
+          }
+        );
 
         return;
       }
@@ -177,7 +182,7 @@ class HCaptcha extends React.Component {
         sentry,
         custom,
         loadAsync,
-        scriptLocation
+        scriptLocation,
       };
 
       mountCaptchaScript(mountParams)

package/src/utils.js

@@ -1,23 +1,24 @@
 function generateQuery(params) {
-    return Object.entries(params)
-        .filter(([key, value]) => value || value === false)
-        .map(([key, value]) => {
-            return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
-        }).join("&");
+  return Object.entries(params)
+    .filter(([key, value]) => value || value === false)
+    .map(([key, value]) => {
+      return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
+    }).join("&");
 };
 
 function getFrame(element) {
-    const doc = (element && element.ownerDocument) || document;
-    const win = doc.defaultView || doc.parentWindow;
-    return { document: doc, window: win };
+  const doc = (element && element.ownerDocument) || document;
+  const win = doc.defaultView || doc.parentWindow || window;
+
+  return { document: doc, window: win };
 }
 
 function getMountElement(element) {
-    return element || document.head;
+  return element || document.head;
 }
 
 export {
-    generateQuery,
-    getFrame,
-    getMountElement
+  generateQuery,
+  getFrame,
+  getMountElement
 };