react-google-recaptcha-hook - npm Package Compare versions

Comparing version 0.2.4 to 1.0.0

dist/react-google-recaptcha-hook.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var g=require("react");const h=c=>new Promise(e=>{var a,r;(a=window.___grecaptcha_cfg)!=null||(window.___grecaptcha_cfg={fns:[]}),c?(r=window==null?void 0:window.grecaptcha)!=null&&r.enterprise?e(window.grecaptcha.enterprise):window.___grecaptcha_cfg.fns.push(()=>e(window.grecaptcha.enterprise)):window!=null&&window.grecaptcha?e(window.grecaptcha):window.___grecaptcha_cfg.fns.push(()=>e(window.grecaptcha))}),w=async(c,e,a)=>(await h(c)).execute(e,{action:a}),n=async c=>{(await h(c)).ready(()=>{const a=document.querySelector(".grecaptcha-badge");a&&(a.style.visibility="hidden")})},f=async c=>{(await h(c)).ready(()=>{const a=document.querySelector(".grecaptcha-badge");a&&(a.style.visibility="visible")})},_=(c,e)=>{const a=e!=null&&e.language?`&hl=${e.language}`:"",r=e!=null&&e.enterprise?"enterprise.js":"api.js";return`https://www.${e!=null&&e.recaptchaNet?"recaptcha.net":"google.com"}/recaptcha/${r}?render=${c}${a}`},b=(c,e)=>{const a=g.useCallback(()=>{if(document.getElementById(c))return;const t=document.createElement("script");t.async=!0,t.type="text/javascript",t.src=_(c,e),t.id=c,document.getElementsByTagName("head")[0].appendChild(t)},[e,c]),r=g.useCallback(()=>n(!!(e!=null&&e.enterprise)),[e==null?void 0:e.enterprise]),u=g.useCallback(()=>f(!!(e!=null&&e.enterprise)),[e==null?void 0:e.enterprise]),l=g.useCallback(t=>w(!!(e!=null&&e.enterprise),c,t),[e==null?void 0:e.enterprise,c]),d=g.useRef(!1);return g.useEffect(()=>{d.current||(d.current=!0,e!=null&&e.hide&&r(),a())},[a,r,e]),{executeGoogleReCaptcha:l,hideGoogleReCaptcha:r,showGoogleReCaptcha:u}};exports.useGoogleReCaptcha=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),h=c=>new Promise(e=>{var a;window.___grecaptcha_cfg??(window.___grecaptcha_cfg={fns:[]}),c?(a=window==null?void 0:window.grecaptcha)!=null&&a.enterprise?e(window.grecaptcha.enterprise):window.___grecaptcha_cfg.fns.push(()=>e(window.grecaptcha.enterprise)):window!=null&&window.grecaptcha?e(window.grecaptcha):window.___grecaptcha_cfg.fns.push(()=>e(window.grecaptcha))}),w=async(c,e,a)=>(await h(c)).execute(e,{action:a}),n=async c=>{(await h(c)).ready(()=>{const a=document.querySelector(".grecaptcha-badge");a&&(a.style.visibility="hidden")})},f=async c=>{(await h(c)).ready(()=>{const a=document.querySelector(".grecaptcha-badge");a&&(a.style.visibility="visible")})},b=(c,e)=>{const a=e!=null&&e.language?`&hl=${e.language}`:"",t=e!=null&&e.enterprise?"enterprise.js":"api.js";return`https://www.${e!=null&&e.recaptchaNet?"recaptcha.net":"google.com"}/recaptcha/${t}?render=${c}${a}`},m=(c,e)=>{const a=g.useCallback(()=>{if(document.getElementById(c))return;const r=document.createElement("script");r.async=!0,r.type="text/javascript",r.src=b(c,e),r.id=c,document.getElementsByTagName("head")[0].appendChild(r)},[e,c]),t=g.useCallback(()=>n(!!(e!=null&&e.enterprise)),[e==null?void 0:e.enterprise]),u=g.useCallback(()=>f(!!(e!=null&&e.enterprise)),[e==null?void 0:e.enterprise]),l=g.useCallback(r=>w(!!(e!=null&&e.enterprise),c,r),[e==null?void 0:e.enterprise,c]),d=g.useRef(!1);return g.useEffect(()=>{d.current||(d.current=!0,e!=null&&e.hide&&t(),a())},[a,t,e]),{executeGoogleReCaptcha:l,hideGoogleReCaptcha:t,showGoogleReCaptcha:u}};exports.useGoogleReCaptcha=m;

dist/react-google-recaptcha-hook.es.js

@@ -1,67 +0,57 @@
-import { useCallback, useRef, useEffect } from "react";
-const getGrecaptcha = (enterprise) => new Promise((resolve) => {
-  var _a, _b;
-  (_a = window.___grecaptcha_cfg) != null ? _a : window.___grecaptcha_cfg = {
+import { useCallback as h, useRef as l, useEffect as n } from "react";
+const g = (c) => new Promise((e) => {
+  var a;
+  window.___grecaptcha_cfg ?? (window.___grecaptcha_cfg = {
     fns: []
-  };
-  if (enterprise) {
-    ((_b = window == null ? void 0 : window.grecaptcha) == null ? void 0 : _b.enterprise) ? resolve(window.grecaptcha.enterprise) : window.___grecaptcha_cfg.fns.push(() => resolve(window.grecaptcha.enterprise));
-  } else {
-    (window == null ? void 0 : window.grecaptcha) ? resolve(window.grecaptcha) : window.___grecaptcha_cfg.fns.push(() => resolve(window.grecaptcha));
-  }
-});
-const executeGrecaptcha = async (enterprise, siteKey, action) => {
-  const grecaptcha = await getGrecaptcha(enterprise);
-  return grecaptcha.execute(siteKey, { action });
-};
-const hideGrecaptcha = async (enterprise) => {
-  const grecaptcha = await getGrecaptcha(enterprise);
-  grecaptcha.ready(() => {
-    const badge = document.querySelector(".grecaptcha-badge");
-    if (badge)
-      badge.style.visibility = "hidden";
+  }), c ? (a = window == null ? void 0 : window.grecaptcha) != null && a.enterprise ? e(window.grecaptcha.enterprise) : window.___grecaptcha_cfg.fns.push(
+    () => (
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      e(window.grecaptcha.enterprise)
+    )
+  ) : window != null && window.grecaptcha ? e(window.grecaptcha) : window.___grecaptcha_cfg.fns.push(
+    () => (
+      //
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      e(window.grecaptcha)
+    )
+  );
+}), f = async (c, e, a) => (await g(c)).execute(e, { action: a }), m = async (c) => {
+  (await g(c)).ready(() => {
+    const a = document.querySelector(".grecaptcha-badge");
+    a && (a.style.visibility = "hidden");
   });
-};
-const showGrecaptcha = async (enterprise) => {
-  const grecaptcha = await getGrecaptcha(enterprise);
-  grecaptcha.ready(() => {
-    const badge = document.querySelector(".grecaptcha-badge");
-    if (badge)
-      badge.style.visibility = "visible";
+}, _ = async (c) => {
+  (await g(c)).ready(() => {
+    const a = document.querySelector(".grecaptcha-badge");
+    a && (a.style.visibility = "visible");
   });
-};
-const generateGrecaptchaSrc = (siteKey, options) => {
-  const language = (options == null ? void 0 : options.language) ? `&hl=${options.language}` : "";
-  const script = (options == null ? void 0 : options.enterprise) ? "enterprise.js" : "api.js";
-  const host = (options == null ? void 0 : options.recaptchaNet) ? "recaptcha.net" : "google.com";
-  return `https://www.${host}/recaptcha/${script}?render=${siteKey}${language}`;
-};
-const useGoogleReCaptcha = (siteKey, options) => {
-  const load = useCallback(() => {
-    if (document.getElementById(siteKey))
+}, y = (c, e) => {
+  const a = e != null && e.language ? `&hl=${e.language}` : "", t = e != null && e.enterprise ? "enterprise.js" : "api.js";
+  return `https://www.${e != null && e.recaptchaNet ? "recaptcha.net" : "google.com"}/recaptcha/${t}?render=${c}${a}`;
+}, b = (c, e) => {
+  const a = h(() => {
+    if (document.getElementById(c))
       return;
-    const script = document.createElement("script");
-    script.async = true;
-    script.type = "text/javascript";
-    script.src = generateGrecaptchaSrc(siteKey, options);
-    script.id = siteKey;
-    document.getElementsByTagName("head")[0].appendChild(script);
-  }, [options, siteKey]);
-  const hideGoogleReCaptcha = useCallback(() => hideGrecaptcha(!!(options == null ? void 0 : options.enterprise)), [options == null ? void 0 : options.enterprise]);
-  const showGoogleReCaptcha = useCallback(() => showGrecaptcha(!!(options == null ? void 0 : options.enterprise)), [options == null ? void 0 : options.enterprise]);
-  const executeGoogleReCaptcha = useCallback((action) => executeGrecaptcha(!!(options == null ? void 0 : options.enterprise), siteKey, action), [options == null ? void 0 : options.enterprise, siteKey]);
-  const oneTimeRef = useRef(false);
-  useEffect(() => {
-    if (oneTimeRef.current)
-      return;
-    oneTimeRef.current = true;
-    (options == null ? void 0 : options.hide) && hideGoogleReCaptcha();
-    load();
-  }, [load, hideGoogleReCaptcha, options]);
-  return {
-    executeGoogleReCaptcha,
-    hideGoogleReCaptcha,
-    showGoogleReCaptcha
+    const r = document.createElement("script");
+    r.async = !0, r.type = "text/javascript", r.src = y(c, e), r.id = c, document.getElementsByTagName("head")[0].appendChild(r);
+  }, [e, c]), t = h(
+    () => m(!!(e != null && e.enterprise)),
+    [e == null ? void 0 : e.enterprise]
+  ), d = h(
+    () => _(!!(e != null && e.enterprise)),
+    [e == null ? void 0 : e.enterprise]
+  ), w = h(
+    (r) => f(!!(e != null && e.enterprise), c, r),
+    [e == null ? void 0 : e.enterprise, c]
+  ), u = l(!1);
+  return n(() => {
+    u.current || (u.current = !0, e != null && e.hide && t(), a());
+  }, [a, t, e]), {
+    executeGoogleReCaptcha: w,
+    hideGoogleReCaptcha: t,
+    showGoogleReCaptcha: d
   };
 };
-export { useGoogleReCaptcha };
+export {
+  b as useGoogleReCaptcha
+};

package.json

@@ -20,3 +20,3 @@ {
   "license": "MIT",
-  "version": "0.2.4",
+  "version": "1.0.0",
   "files": [
@@ -46,4 +46,3 @@ "dist",
     "fix:prettier": "prettier . --write --ignore-path .gitignore",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev",
     "prepare": "husky install"
@@ -56,31 +55,29 @@ },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-interactions": "^6.5.6",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/builder-vite": "^0.1.36",
-    "@storybook/react": "^6.5.6",
-    "@storybook/testing-library": "^0.0.11",
-    "@testing-library/react": "^13.3.0",
-    "@types/node": "^18.0.3",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "@vitejs/plugin-react": "^1.3.2",
-    "c8": "^7.11.3",
-    "cspell": "^6.1.2",
-    "eslint": "^8.17.0",
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-interactions": "^7.0.0",
+    "@storybook/react": "^7.0.0",
+    "@storybook/react-vite": "^7.0.0",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@testing-library/react": "^14.0.0",
+    "@types/node": "^18.7.16",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "@vitest/coverage-c8": "^0.23.1",
+    "cspell": "^6.8.1",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "happy-dom": "^6.0.2",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "happy-dom": "^8.1.0",
     "husky": "^8.0.1",
-    "prettier": "^2.6.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "typescript": "^4.7.2",
-    "vite": "^2.9.9",
-    "vitest": "^0.12.9"
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.0.0",
+    "vitest": "^0.23.1"
   }
 }

README.md

@@ -28,3 +28,3 @@ # React Hook for Google reCAPTCHA V3
   const submit = async () => {
-    const token = await executeRecaptcha("submit");
+    const token = await executeRecaptcha(ACTION_NAME);
 
@@ -31,0 +31,0 @@ // Do whatever you want with the token

types/useGoogleRecaptcha.d.ts

@@ -11,3 +11,3 @@ declare global {
 }
-export declare type ReCaptcha = {
+export type ReCaptcha = {
     execute(siteKey: string, options: {
@@ -14,0 +14,0 @@ action: string;

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

26

decreased by-7.14%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

11895

decreased by-8.32%

Lines of code

102

decreased by-8.93%

No dependency changes