react-hook-recaptcha - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/index.js

@@ -1,137 +0,134 @@
-(function (exports, react) {
-  'use strict';
+'use strict';
 
-  // original: https://usehooks.com/useScript/
-  function useScript(src) {
-    // Keep track of script status ("idle", "loading", "ready", "error")
-    var [status, setStatus] = react.useState(src ? "loading" : "idle");
-    react.useEffect(() => {
-      // Allow falsy src value if waiting on other data needed for
-      // constructing the script URL passed to this hook.
-      if (!src) {
-        setStatus("idle");
-        return;
-      } // Fetch existing script element by src
-      // It may have been added by another intance of this hook
+Object.defineProperty(exports, '__esModule', { value: true });
 
+var react = require('react');
 
-      var script = document.querySelector("script[src=\"".concat(src, "\"]"));
+// original: https://usehooks.com/useScript/
+function useScript(src) {
+  // Keep track of script status ("idle", "loading", "ready", "error")
+  var [status, setStatus] = react.useState(src ? "loading" : "idle");
+  react.useEffect(() => {
+    // Allow falsy src value if waiting on other data needed for
+    // constructing the script URL passed to this hook.
+    if (!src) {
+      setStatus("idle");
+      return;
+    } // Fetch existing script element by src
+    // It may have been added by another intance of this hook
 
-      if (!script) {
-        // Create script
-        script = document.createElement("script");
-        script.src = src;
-        script.async = true;
-        script.defer = true;
-        script.setAttribute("data-status", "loading"); // Add script to document body
 
-        document.body.appendChild(script); // Store status in attribute on script
-        // This can be read by other instances of this hook
+    var script = document.querySelector("script[src=\"".concat(src, "\"]"));
 
-        var setAttributeFromEvent = event => {
-          script.setAttribute("data-status", event.type === "load" ? "ready" : "error");
-        };
+    if (!script) {
+      // Create script
+      script = document.createElement("script");
+      script.src = src;
+      script.async = true;
+      script.defer = true;
+      script.setAttribute("data-status", "loading"); // Add script to document body
 
-        script.addEventListener("load", setAttributeFromEvent);
-        script.addEventListener("error", setAttributeFromEvent);
-      } else {
-        // Grab existing script status from attribute and set to state.
-        setStatus(script.getAttribute("data-status"));
-      } // Script event handler to update status in state
-      // Note: Even if the script already exists we still need to add
-      // event handlers to update the state for *this* hook instance.
+      document.body.appendChild(script); // Store status in attribute on script
+      // This can be read by other instances of this hook
 
+      var setAttributeFromEvent = event => {
+        script.setAttribute("data-status", event.type === "load" ? "ready" : "error");
+      };
 
-      var setStateFromEvent = event => {
-        setStatus(event.type === "load" ? "ready" : "error");
-      }; // Add event listeners
+      script.addEventListener("load", setAttributeFromEvent);
+      script.addEventListener("error", setAttributeFromEvent);
+    } else {
+      // Grab existing script status from attribute and set to state.
+      setStatus(script.getAttribute("data-status"));
+    } // Script event handler to update status in state
+    // Note: Even if the script already exists we still need to add
+    // event handlers to update the state for *this* hook instance.
 
 
-      script.addEventListener("load", setStateFromEvent);
-      script.addEventListener("error", setStateFromEvent); // Remove event listeners on cleanup
+    var setStateFromEvent = event => {
+      setStatus(event.type === "load" ? "ready" : "error");
+    }; // Add event listeners
 
-      return () => {
-        if (script) {
-          script.removeEventListener("load", setStateFromEvent);
-          script.removeEventListener("error", setStateFromEvent);
-        }
-      };
-    }, [src] // Only re-run effect if script src changes
-    );
-    return status;
-  }
 
-  var RECAPTCHA_SCRIPT_SRC_URL = 'https://www.google.com/recaptcha/api.js?render=explicit';
-  var timer;
-  /**
-   * a hook integrates google-recaptcha v2 into react function components
-   * @param {Object} config configuration of recaptcha
-   * @param {string} config.containerId  ID of the container to render the recaptcha widget
-   * @param {string} config.sitekey client-side sitekey
-   * @param {string} config.size the size of the widget. Value can be either of "normal", "compact", "invisible"
-   * @param {string} config.theme The color theme of the widget. Value can be either of "dark" or "light". This is only applicable to checkbox recaptcha
-   * @param {string} config.badge Reposition the recaptcha badge. Value can be either of "bottomright", "bottomleft", 'inline'. 'inline' lets you position it with CSS. This is only applicable to invisible recaptcha
-   * @param {Function} config.successCallback executed when the user submits a successful response and passes the challenge if it prompts up. The g-recaptcha-response token is passed to the callback.
-   * @param {Function} config.expiredCallback executed when the recaptcha response expires and the user needs to re-verify.
-   * @param {Function} config.errorCallback executed when recaptcha encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.
-   * @return {Object}
-   */
+    script.addEventListener("load", setStateFromEvent);
+    script.addEventListener("error", setStateFromEvent); // Remove event listeners on cleanup
 
-  function useRecaptcha(_ref) {
-    var _window, _window$grecaptcha;
-
-    var {
-      containerId,
-      sitekey,
-      size,
-      theme,
-      successCallback,
-      expiredCallback,
-      errorCallback
-    } = _ref;
-    // https://stackoverflow.com/questions/45240833/what-are-the-benefits-of-explicitly-rendering-recaptcha-widget-as-opposed-to-aut
-    // explicit rendering is needed because the view template of applicatio may not be loaded yet when recaptcha is loaded
-    useScript(RECAPTCHA_SCRIPT_SRC_URL);
-    var [recaptchaLoaded, setRecaptchaLoaded] = react.useState((_window = window) !== null && _window !== void 0 && (_window$grecaptcha = _window.grecaptcha) !== null && _window$grecaptcha !== void 0 && _window$grecaptcha.render ? true : false);
-    var [recaptchaWidget, setRecaptchaWidget] = react.useState(null);
-    react.useEffect(() => {
-      timer = window.setInterval(() => {
-        var _window2, _window2$grecaptcha;
-
-        if ((_window2 = window) !== null && _window2 !== void 0 && (_window2$grecaptcha = _window2.grecaptcha) !== null && _window2$grecaptcha !== void 0 && _window2$grecaptcha.render) {
-          setRecaptchaLoaded(true);
-        }
-      }, 500);
-      return () => {
-        clearInterval(timer);
-      };
-    }, []);
-    react.useEffect(() => {
-      if (recaptchaLoaded && recaptchaWidget === null) {
-        clearInterval(timer);
-        var widget = window.grecaptcha.render(containerId, {
-          sitekey,
-          size,
-          theme,
-          callback: successCallback,
-          'expired-callback': expiredCallback,
-          'error-callback': errorCallback
-        });
-        setRecaptchaWidget(widget);
+    return () => {
+      if (script) {
+        script.removeEventListener("load", setStateFromEvent);
+        script.removeEventListener("error", setStateFromEvent);
       }
-    }, [recaptchaLoaded, successCallback, recaptchaWidget, containerId]);
-    return {
-      recaptchaLoaded,
-      recaptchaWidget
     };
-  }
+  }, [src] // Only re-run effect if script src changes
+  );
+  return status;
+}
 
-  exports.RECAPTCHA_SCRIPT_SRC_URL = RECAPTCHA_SCRIPT_SRC_URL;
-  exports.useRecaptcha = useRecaptcha;
+var RECAPTCHA_SCRIPT_SRC_URL = 'https://www.google.com/recaptcha/api.js?render=explicit';
+var timer;
+/**
+ * a hook integrates google-recaptcha v2 into react function components
+ * @param {Object} config configuration of recaptcha
+ * @param {string} config.containerId  ID of the container to render the recaptcha widget
+ * @param {string} config.sitekey client-side sitekey
+ * @param {string} config.size the size of the widget. Value can be either of "normal", "compact", "invisible"
+ * @param {string} config.theme The color theme of the widget. Value can be either of "dark" or "light". This is only applicable to checkbox recaptcha
+ * @param {string} config.badge Reposition the recaptcha badge. Value can be either of "bottomright", "bottomleft", 'inline'. 'inline' lets you position it with CSS. This is only applicable to invisible recaptcha
+ * @param {Function} config.successCallback executed when the user submits a successful response and passes the challenge if it prompts up. The g-recaptcha-response token is passed to the callback.
+ * @param {Function} config.expiredCallback executed when the recaptcha response expires and the user needs to re-verify.
+ * @param {Function} config.errorCallback executed when recaptcha encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry.
+ * @return {Object}
+ */
 
-  Object.defineProperty(exports, '__esModule', { value: true });
+function useRecaptcha(_ref) {
+  var _window, _window$grecaptcha;
 
-  return exports;
+  var {
+    containerId,
+    sitekey,
+    size,
+    theme,
+    successCallback,
+    expiredCallback,
+    errorCallback
+  } = _ref;
+  // https://stackoverflow.com/questions/45240833/what-are-the-benefits-of-explicitly-rendering-recaptcha-widget-as-opposed-to-aut
+  // explicit rendering is needed because the view template of applicatio may not be loaded yet when recaptcha is loaded
+  useScript(RECAPTCHA_SCRIPT_SRC_URL);
+  var [recaptchaLoaded, setRecaptchaLoaded] = react.useState((_window = window) !== null && _window !== void 0 && (_window$grecaptcha = _window.grecaptcha) !== null && _window$grecaptcha !== void 0 && _window$grecaptcha.render ? true : false);
+  var [recaptchaWidget, setRecaptchaWidget] = react.useState(null);
+  react.useEffect(() => {
+    timer = window.setInterval(() => {
+      var _window2, _window2$grecaptcha;
 
-}({}, react));
+      if ((_window2 = window) !== null && _window2 !== void 0 && (_window2$grecaptcha = _window2.grecaptcha) !== null && _window2$grecaptcha !== void 0 && _window2$grecaptcha.render) {
+        setRecaptchaLoaded(true);
+      }
+    }, 500);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+  react.useEffect(() => {
+    if (recaptchaLoaded && recaptchaWidget === null) {
+      clearInterval(timer);
+      var widget = window.grecaptcha.render(containerId, {
+        sitekey,
+        size,
+        theme,
+        callback: successCallback,
+        'expired-callback': expiredCallback,
+        'error-callback': errorCallback
+      });
+      setRecaptchaWidget(widget);
+    }
+  }, [recaptchaLoaded, successCallback, recaptchaWidget, containerId]);
+  return {
+    recaptchaLoaded,
+    recaptchaWidget
+  };
+}
+
+exports.RECAPTCHA_SCRIPT_SRC_URL = RECAPTCHA_SCRIPT_SRC_URL;
+exports.useRecaptcha = useRecaptcha;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-hook-recaptcha",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React hook for google-recaptcha v2",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

16961

decreased by-1.53%

Lines of code

115

decreased by-1.71%

No dependency changes