@hcaptcha/react-hcaptcha - npm Package Compare versions

Comparing version 1.8.0 to 1.8.1

dist/esm/index.js

 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';
@@ -61,4 +61,2 @@ var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
     _this = _React$Component.call(this, props) || this;
-    var element = getMountElement(_this.props.scriptLocation);
-    var frame = getFrame(element);
     /**
@@ -71,3 +69,3 @@ * Internal reference to track hCaptcha API
 
-    _this._hcaptcha = frame.window.hcaptcha || undefined; // API Methods
+    _this._hcaptcha = undefined; // API Methods
 
@@ -87,7 +85,6 @@ _this.renderCaptcha = _this.renderCaptcha.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,
@@ -103,4 +100,9 @@ elementId: props.id,
   _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';
     /*
@@ -113,3 +115,7 @@ * Check if hCaptcha has already been loaded,
     if (isApiReady) {
-      this.renderCaptcha();
+      this.setState({
+        isApiReady: true
+      }, function () {
+        _this2.renderCaptcha();
+      });
       return;
@@ -144,3 +150,3 @@ }
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var _this2 = this;
+    var _this3 = this;
 
@@ -151,3 +157,3 @@ // Prop Keys that could change
     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
@@ -157,3 +163,3 @@
       this.removeCaptcha(function () {
-        _this2.renderCaptcha();
+        _this3.renderCaptcha();
       });
@@ -253,3 +259,3 @@ }
   _proto.handleOnLoad = function handleOnLoad() {
-    var _this3 = this;
+    var _this4 = this;
 
@@ -259,9 +265,9 @@ this.setState({
     }, 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();
@@ -268,0 +274,0 @@ });

dist/esm/utils.js

@@ -17,3 +17,3 @@ function generateQuery(params) {
   var doc = element && element.ownerDocument || document;
-  var win = doc.defaultView || doc.parentWindow;
+  var win = doc.defaultView || doc.parentWindow || window;
   return {
@@ -20,0 +20,0 @@ document: doc,

dist/index.js

@@ -90,4 +90,2 @@ "use strict";
     _this = _super.call(this, props);
-    var element = (0, _utils.getMountElement)(_this.props.scriptLocation);
-    var frame = (0, _utils.getFrame)(element);
     /**
@@ -100,3 +98,3 @@ * Internal reference to track hCaptcha API
 
-    _this._hcaptcha = frame.window.hcaptcha || undefined; // API Methods
+    _this._hcaptcha = undefined; // API Methods
 
@@ -116,7 +114,6 @@ _this.renderCaptcha = _this.renderCaptcha.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,
@@ -132,4 +129,9 @@ elementId: props.id,
     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';
       /*
@@ -142,3 +144,7 @@ * Check if hCaptcha has already been loaded,
       if (isApiReady) {
-        this.renderCaptcha();
+        this.setState({
+          isApiReady: true
+        }, function () {
+          _this2.renderCaptcha();
+        });
         return;
@@ -176,3 +182,3 @@ }
     value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -183,3 +189,3 @@ // Prop Keys that could change
       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
@@ -189,3 +195,3 @@
         this.removeCaptcha(function () {
-          _this2.renderCaptcha();
+          _this3.renderCaptcha();
         });
@@ -290,3 +296,3 @@ }
     value: function handleOnLoad() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -296,9 +302,9 @@ this.setState({
       }, 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();
@@ -305,0 +311,0 @@ });

dist/utils.js

@@ -34,3 +34,3 @@ "use strict";
   var doc = element && element.ownerDocument || document;
-  var win = doc.defaultView || doc.parentWindow;
+  var win = doc.defaultView || doc.parentWindow || window;
   return {
@@ -37,0 +37,0 @@ document: doc,

package.json

 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "types": "types/index.d.ts",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.js

 import * as React from 'react';
-import { generateQuery, getFrame, getMountElement } from "./utils.js";
+import { generateQuery, getFrame, getMountElement } from './utils.js';
 
@@ -11,3 +11,3 @@ const SCRIPT_ID = 'hcaptcha-api-script-id';
 // Generate hCaptcha API script
-const mountCaptchaScript = (params={}) => {
+const mountCaptchaScript = (params = {}) => {
   const element = getMountElement(params.scriptLocation);
@@ -56,5 +56,2 @@ delete params.scriptLocation;
 
-      const element = getMountElement(this.props.scriptLocation);
-      const frame = getFrame(element);
-
       /**
@@ -66,3 +63,3 @@ * Internal reference to track hCaptcha API
        */
-      this._hcaptcha = frame.window.hcaptcha || undefined;
+      this._hcaptcha = undefined;
 
@@ -85,5 +82,2 @@ // API Methods
 
-
-      const isApiReady = typeof this._hcaptcha !== 'undefined';
-
       this.ref = React.createRef();
@@ -93,3 +87,3 @@ this.apiScriptRequested = false;
       this.state = {
-        isApiReady,
+        isApiReady: false,
         isRemoved: false,
@@ -102,4 +96,8 @@ elementId: props.id,
     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';
+
       /*
@@ -111,3 +109,10 @@ * Check if hCaptcha has already been loaded,
       if (isApiReady) {
-        this.renderCaptcha();
+        this.setState(
+          {
+            isApiReady: true
+          },
+          () => {
+            this.renderCaptcha();
+          }
+        );
 
@@ -187,3 +192,3 @@ return;
         loadAsync,
-        scriptLocation
+        scriptLocation,
       };
@@ -190,0 +195,0 @@

src/utils.js

 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
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52260

increased by0.6%

Lines of code

1118

increased by1.54%

No dependency changes