@thibault.sh/hooks/dist/useClickOutside.mjs.map

A comprehensive collection of React hooks for browser storage, UI interactions, and more

{"version":3,"sources":["../src/hooks/useClickOutside.ts"],"names":["useClickOutside","ref","handler","useEffect","listener","event"],"mappings":"8BASaA,IAAAA,CAAAA,CAAkB,CAC7BC,CAAAA,CACAC,CACS,GAAA,CACTC,SAAU,CAAA,IAAM,CACd,IAAMC,CAAYC,CAAAA,CAAAA,EAAmC,CAC/C,EAACJ,CAAA,EAAA,IAAA,EAAAA,CAAK,CAAA,OAAA,CAAA,EAAWA,CAAI,CAAA,OAAA,CAAQ,QAASI,CAAAA,CAAAA,CAAM,MAAc,CAAA,EAG9DH,CAAQG,CAAAA,CAAK,EACf,CAAA,CAEA,OAAS,QAAA,CAAA,gBAAA,CAAiB,WAAaD,CAAAA,CAAQ,CAC/C,CAAA,QAAA,CAAS,gBAAiB,CAAA,YAAA,CAAcA,CAAQ,CAAA,CAEzC,IAAM,CACX,QAAS,CAAA,mBAAA,CAAoB,WAAaA,CAAAA,CAAQ,CAClD,CAAA,QAAA,CAAS,mBAAoB,CAAA,YAAA,CAAcA,CAAQ,EACrD,CACF,CAAA,CAAG,CAACH,CAAAA,CAAKC,CAAO,CAAC,EACnB","file":"useClickOutside.mjs","sourcesContent":["import { useEffect, RefObject } from \"react\";\n\ntype Handler = (event: MouseEvent | TouchEvent) => void;\n\n/**\n * Hook that handles click outside of the referenced element\n * @param ref - React ref object for the element to monitor\n * @param handler - Callback function to execute when click outside occurs\n */\nexport const useClickOutside = <T extends HTMLElement = HTMLElement>(\n  ref: RefObject<T | null> | null,\n  handler: Handler\n): void => {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      if (!ref?.current || ref.current.contains(event.target as Node)) {\n        return;\n      }\n      handler(event);\n    };\n\n    document.addEventListener(\"mousedown\", listener);\n    document.addEventListener(\"touchstart\", listener);\n\n    return () => {\n      document.removeEventListener(\"mousedown\", listener);\n      document.removeEventListener(\"touchstart\", listener);\n    };\n  }, [ref, handler]);\n};\n"]}