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

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

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

@@ -28,2 +28,14 @@ import { useCallback, useRef, useEffect } from "react";
 });
+const hideGrecaptcha = () => {
+  initGrecaptcha();
+  window.grecaptcha.ready(() => {
+    document.querySelector(".grecaptcha-badge").style.visibility = "hidden";
+  });
+};
+const showGrecaptcha = () => {
+  initGrecaptcha();
+  window.grecaptcha.ready(() => {
+    document.querySelector(".grecaptcha-badge").style.visibility = "visible";
+  });
+};
 const generateGrecaptchaSrc = (siteKey, options) => {
@@ -46,2 +58,4 @@ const language = (options == null ? void 0 : options.language) ? `&hl=${options.language}` : "";
   }, []);
+  const hideGoogleReCaptcha = useCallback(hideGrecaptcha, []);
+  const showGoogleReCaptcha = useCallback(showGrecaptcha, []);
   const executeGoogleReCaptcha = useCallback(async (action) => {
@@ -57,6 +71,11 @@ var _a;
     oneTimeRef.current = true;
+    (options == null ? void 0 : options.hide) && hideGoogleReCaptcha();
     load();
-  }, [load]);
-  return { executeGoogleReCaptcha, load };
+  }, [load, hideGoogleReCaptcha, options]);
+  return {
+    executeGoogleReCaptcha,
+    hideGoogleReCaptcha,
+    showGoogleReCaptcha
+  };
 };
 export { useGoogleReCaptcha };

package.json

@@ -20,3 +20,3 @@ {
   "license": "MIT",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "files": [
@@ -41,2 +41,4 @@ "dist",
     "fix:prettier": "prettier . --write --ignore-path .gitignore",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
     "prepare": "husky install"
@@ -49,2 +51,9 @@ },
   "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",
@@ -59,2 +68,4 @@ "@types/node": "^17.0.36",
     "prettier": "^2.6.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "typescript": "^4.7.2",
@@ -61,0 +72,0 @@ "vite": "^2.9.9",

README.md

@@ -11,3 +11,3 @@ # React Hook for Google reCAPTCHA V3
 
-## Usage
+## Simeplest Example
 
@@ -17,11 +17,7 @@ ```javascript
 
-const YourComponent = () => {
-  const { executeGoogleReCaptcha } = useGoogleReCaptcha(`${YOUR_SITE_KEY}`, {
-    language: `${LANGUAGE_CODE}`, // optional, https://developers.google.com/recaptcha/docs/language
-    enterprise: `${BOOLEAN}`, // optional, true if you want use enterprise edition
-    recaptchaNet: `${BOOLEAN}`, // optional, true if you want use recaptcha.net instead of google.com
-  });
+const Form = () => {
+  const { executeGoogleReCaptcha } = useGoogleReCaptcha(SITE_KEY);
 
-  const handleReCaptchaVerify = useCallback(async () => {
-    const token = await executeRecaptcha(`${YOUR_ACTION}`);
+  const submit = useCallback(async () => {
+    const token = await executeRecaptcha("submit");
 
@@ -31,27 +27,28 @@ // Do whatever you want with the token
 
-  return <button onClick={handleReCaptchaVerify}>Submit</button>;
+  return <button onClick={submit}>SUBMIT</button>;
 };
 ```
 
-## Example
+## Usage
 
 ```javascript
-import { useGoogleReCaptcha } from "react-google-recaptcha-hook";
+const {
+  executeGoogleReCaptcha, // execute reCAPTCHA, return torken
+  showGoogleReCaptcha, // show recaptcha-badge
+  hideGoogleReCaptcha, // hide recaptcha-badge
+} = useGoogleReCaptcha(
+  `${YOUR_SITE_KEY}`, // your site key
+  {
+    hide: `${BOOLEAN}`, // optional, true if you want to hide recaptcha-badge beforehand
+    language: `${LANGUAGE_CODE}`, // optional, https://developers.google.com/recaptcha/docs/language
+    enterprise: `${BOOLEAN}`, // optional, true if you want to use enterprise edition
+    recaptchaNet: `${BOOLEAN}`, // optional, true if you want to use recaptcha.net instead of google.com
+  }
+);
+```
 
-const YourComponent = () => {
-  const { executeGoogleReCaptcha } = useGoogleReCaptcha("ABCDEFG123456");
+## Note
 
-  const postComment = useCallback(async () => {
-    const token = await executeRecaptcha("postComment");
-    fetch("/api/echo", {
-      method: "POST",
-      body: JSON.stringify({
-        comment: "hello",
-        token,
-      }),
-    });
-  }, []);
+> You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.
 
-  return <button onClick={postComment}>POST</button>;
-};
-```
+See: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

types/functions.d.ts

@@ -7,2 +7,4 @@ import { ReCaptcha } from "./useGoogleRecaptcha";
 export declare const getGrecaptcha: (enterprise?: boolean) => Promise<ReCaptcha>;
+export declare const hideGrecaptcha: () => void;
+export declare const showGrecaptcha: () => void;
 export declare const generateGrecaptchaSrc: (siteKey: string, options?: {
@@ -9,0 +11,0 @@ language?: string;

types/useGoogleRecaptcha.d.ts

@@ -18,2 +18,3 @@ declare global {
 export declare const useGoogleReCaptcha: (siteKey: string, options?: {
+    hide?: boolean;
     language?: string;
@@ -24,4 +25,5 @@ enterprise?: boolean;
     executeGoogleReCaptcha: (action: string) => Promise<string | undefined>;
-    load: () => void;
+    hideGoogleReCaptcha: () => void;
+    showGoogleReCaptcha: () => void;
 };
 //# sourceMappingURL=useGoogleRecaptcha.d.ts.map

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

11681

increased by16.76%

Lines of code

126

increased by24.75%

Worsened metrics

Dev dependency count

21

increased by75%

Number of lines in readme file

52

decreased by-5.45%

No dependency changes