@usefy/use-click-any-where 0.0.8

package/dist/index.d.mts

@@ -0,0 +1,70 @@
+/**
+ * Options for useClickAnyWhere hook
+ */
+interface UseClickAnyWhereOptions {
+    /**
+     * Whether the event listener is enabled
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Whether to use event capture phase
+     * @default false
+     */
+    capture?: boolean;
+    /**
+     * Whether to use passive event listener
+     * @default true
+     */
+    passive?: boolean;
+}
+/**
+ * Handler type for click events
+ */
+type ClickAnyWhereHandler = (event: MouseEvent) => void;
+/**
+ * Detects document-wide click events and calls the provided handler.
+ * Useful for closing dropdowns, modals, or any component when clicking outside.
+ *
+ * @param handler - Callback function called when a click is detected anywhere on the document
+ * @param options - Configuration options for the event listener
+ *
+ * @example
+ * ```tsx
+ * function ClickTracker() {
+ *   const [lastClick, setLastClick] = useState({ x: 0, y: 0 });
+ *
+ *   useClickAnyWhere((event) => {
+ *     setLastClick({ x: event.clientX, y: event.clientY });
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       Last click: ({lastClick.x}, {lastClick.y})
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditional activation
+ * function Dropdown({ isOpen, onClose }) {
+ *   useClickAnyWhere(
+ *     () => onClose(),
+ *     { enabled: isOpen }
+ *   );
+ *
+ *   return isOpen ? <div>Dropdown content</div> : null;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With capture phase
+ * useClickAnyWhere(handleClick, { capture: true });
+ * ```
+ */
+declare function useClickAnyWhere(handler: ClickAnyWhereHandler, options?: UseClickAnyWhereOptions): void;
+
+export { type ClickAnyWhereHandler, type UseClickAnyWhereOptions, useClickAnyWhere };

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Options for useClickAnyWhere hook
+ */
+interface UseClickAnyWhereOptions {
+    /**
+     * Whether the event listener is enabled
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Whether to use event capture phase
+     * @default false
+     */
+    capture?: boolean;
+    /**
+     * Whether to use passive event listener
+     * @default true
+     */
+    passive?: boolean;
+}
+/**
+ * Handler type for click events
+ */
+type ClickAnyWhereHandler = (event: MouseEvent) => void;
+/**
+ * Detects document-wide click events and calls the provided handler.
+ * Useful for closing dropdowns, modals, or any component when clicking outside.
+ *
+ * @param handler - Callback function called when a click is detected anywhere on the document
+ * @param options - Configuration options for the event listener
+ *
+ * @example
+ * ```tsx
+ * function ClickTracker() {
+ *   const [lastClick, setLastClick] = useState({ x: 0, y: 0 });
+ *
+ *   useClickAnyWhere((event) => {
+ *     setLastClick({ x: event.clientX, y: event.clientY });
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       Last click: ({lastClick.x}, {lastClick.y})
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Conditional activation
+ * function Dropdown({ isOpen, onClose }) {
+ *   useClickAnyWhere(
+ *     () => onClose(),
+ *     { enabled: isOpen }
+ *   );
+ *
+ *   return isOpen ? <div>Dropdown content</div> : null;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With capture phase
+ * useClickAnyWhere(handleClick, { capture: true });
+ * ```
+ */
+declare function useClickAnyWhere(handler: ClickAnyWhereHandler, options?: UseClickAnyWhereOptions): void;
+
+export { type ClickAnyWhereHandler, type UseClickAnyWhereOptions, useClickAnyWhere };

package/dist/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useClickAnyWhere: () => useClickAnyWhere
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useClickAnyWhere.ts
+var import_react = require("react");
+function useClickAnyWhere(handler, options = {}) {
+  const { enabled = true, capture = false, passive = true } = options;
+  const handlerRef = (0, import_react.useRef)(handler);
+  handlerRef.current = handler;
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (!enabled) {
+      return;
+    }
+    const internalHandler = (event) => {
+      handlerRef.current(event);
+    };
+    document.addEventListener("click", internalHandler, { capture, passive });
+    return () => {
+      document.removeEventListener("click", internalHandler, { capture });
+    };
+  }, [enabled, capture, passive]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useClickAnyWhere
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useClickAnyWhere.ts"],"sourcesContent":["export {\n  useClickAnyWhere,\n  type UseClickAnyWhereOptions,\n  type ClickAnyWhereHandler,\n} from \"./useClickAnyWhere\";\n","import { useEffect, useRef } from \"react\";\n\n/**\n * Options for useClickAnyWhere hook\n */\nexport interface UseClickAnyWhereOptions {\n  /**\n   * Whether the event listener is enabled\n   * @default true\n   */\n  enabled?: boolean;\n  /**\n   * Whether to use event capture phase\n   * @default false\n   */\n  capture?: boolean;\n  /**\n   * Whether to use passive event listener\n   * @default true\n   */\n  passive?: boolean;\n}\n\n/**\n * Handler type for click events\n */\nexport type ClickAnyWhereHandler = (event: MouseEvent) => void;\n\n/**\n * Detects document-wide click events and calls the provided handler.\n * Useful for closing dropdowns, modals, or any component when clicking outside.\n *\n * @param handler - Callback function called when a click is detected anywhere on the document\n * @param options - Configuration options for the event listener\n *\n * @example\n * ```tsx\n * function ClickTracker() {\n *   const [lastClick, setLastClick] = useState({ x: 0, y: 0 });\n *\n *   useClickAnyWhere((event) => {\n *     setLastClick({ x: event.clientX, y: event.clientY });\n *   });\n *\n *   return (\n *     <div>\n *       Last click: ({lastClick.x}, {lastClick.y})\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Conditional activation\n * function Dropdown({ isOpen, onClose }) {\n *   useClickAnyWhere(\n *     () => onClose(),\n *     { enabled: isOpen }\n *   );\n *\n *   return isOpen ? <div>Dropdown content</div> : null;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With capture phase\n * useClickAnyWhere(handleClick, { capture: true });\n * ```\n */\nexport function useClickAnyWhere(\n  handler: ClickAnyWhereHandler,\n  options: UseClickAnyWhereOptions = {}\n): void {\n  const { enabled = true, capture = false, passive = true } = options;\n\n  // Store handler in ref to avoid re-registering event listener\n  const handlerRef = useRef<ClickAnyWhereHandler>(handler);\n\n  // Update ref when handler changes\n  handlerRef.current = handler;\n\n  useEffect(() => {\n    // SSR check\n    if (typeof document === \"undefined\") {\n      return;\n    }\n\n    // Don't add listener if disabled\n    if (!enabled) {\n      return;\n    }\n\n    // Internal handler that calls the latest handler ref\n    const internalHandler = (event: MouseEvent) => {\n      handlerRef.current(event);\n    };\n\n    // Add event listener\n    document.addEventListener(\"click\", internalHandler, { capture, passive });\n\n    // Cleanup\n    return () => {\n      document.removeEventListener(\"click\", internalHandler, { capture });\n    };\n  }, [enabled, capture, passive]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkC;AAuE3B,SAAS,iBACd,SACA,UAAmC,CAAC,GAC9B;AACN,QAAM,EAAE,UAAU,MAAM,UAAU,OAAO,UAAU,KAAK,IAAI;AAG5D,QAAM,iBAAa,qBAA6B,OAAO;AAGvD,aAAW,UAAU;AAErB,8BAAU,MAAM;AAEd,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAGA,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAGA,UAAM,kBAAkB,CAAC,UAAsB;AAC7C,iBAAW,QAAQ,KAAK;AAAA,IAC1B;AAGA,aAAS,iBAAiB,SAAS,iBAAiB,EAAE,SAAS,QAAQ,CAAC;AAGxE,WAAO,MAAM;AACX,eAAS,oBAAoB,SAAS,iBAAiB,EAAE,QAAQ,CAAC;AAAA,IACpE;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,OAAO,CAAC;AAChC;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,26 @@
+// src/useClickAnyWhere.ts
+import { useEffect, useRef } from "react";
+function useClickAnyWhere(handler, options = {}) {
+  const { enabled = true, capture = false, passive = true } = options;
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (!enabled) {
+      return;
+    }
+    const internalHandler = (event) => {
+      handlerRef.current(event);
+    };
+    document.addEventListener("click", internalHandler, { capture, passive });
+    return () => {
+      document.removeEventListener("click", internalHandler, { capture });
+    };
+  }, [enabled, capture, passive]);
+}
+export {
+  useClickAnyWhere
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useClickAnyWhere.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * Options for useClickAnyWhere hook\n */\nexport interface UseClickAnyWhereOptions {\n  /**\n   * Whether the event listener is enabled\n   * @default true\n   */\n  enabled?: boolean;\n  /**\n   * Whether to use event capture phase\n   * @default false\n   */\n  capture?: boolean;\n  /**\n   * Whether to use passive event listener\n   * @default true\n   */\n  passive?: boolean;\n}\n\n/**\n * Handler type for click events\n */\nexport type ClickAnyWhereHandler = (event: MouseEvent) => void;\n\n/**\n * Detects document-wide click events and calls the provided handler.\n * Useful for closing dropdowns, modals, or any component when clicking outside.\n *\n * @param handler - Callback function called when a click is detected anywhere on the document\n * @param options - Configuration options for the event listener\n *\n * @example\n * ```tsx\n * function ClickTracker() {\n *   const [lastClick, setLastClick] = useState({ x: 0, y: 0 });\n *\n *   useClickAnyWhere((event) => {\n *     setLastClick({ x: event.clientX, y: event.clientY });\n *   });\n *\n *   return (\n *     <div>\n *       Last click: ({lastClick.x}, {lastClick.y})\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Conditional activation\n * function Dropdown({ isOpen, onClose }) {\n *   useClickAnyWhere(\n *     () => onClose(),\n *     { enabled: isOpen }\n *   );\n *\n *   return isOpen ? <div>Dropdown content</div> : null;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With capture phase\n * useClickAnyWhere(handleClick, { capture: true });\n * ```\n */\nexport function useClickAnyWhere(\n  handler: ClickAnyWhereHandler,\n  options: UseClickAnyWhereOptions = {}\n): void {\n  const { enabled = true, capture = false, passive = true } = options;\n\n  // Store handler in ref to avoid re-registering event listener\n  const handlerRef = useRef<ClickAnyWhereHandler>(handler);\n\n  // Update ref when handler changes\n  handlerRef.current = handler;\n\n  useEffect(() => {\n    // SSR check\n    if (typeof document === \"undefined\") {\n      return;\n    }\n\n    // Don't add listener if disabled\n    if (!enabled) {\n      return;\n    }\n\n    // Internal handler that calls the latest handler ref\n    const internalHandler = (event: MouseEvent) => {\n      handlerRef.current(event);\n    };\n\n    // Add event listener\n    document.addEventListener(\"click\", internalHandler, { capture, passive });\n\n    // Cleanup\n    return () => {\n      document.removeEventListener(\"click\", internalHandler, { capture });\n    };\n  }, [enabled, capture, passive]);\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AAuE3B,SAAS,iBACd,SACA,UAAmC,CAAC,GAC9B;AACN,QAAM,EAAE,UAAU,MAAM,UAAU,OAAO,UAAU,KAAK,IAAI;AAG5D,QAAM,aAAa,OAA6B,OAAO;AAGvD,aAAW,UAAU;AAErB,YAAU,MAAM;AAEd,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAGA,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAGA,UAAM,kBAAkB,CAAC,UAAsB;AAC7C,iBAAW,QAAQ,KAAK;AAAA,IAC1B;AAGA,aAAS,iBAAiB,SAAS,iBAAiB,EAAE,SAAS,QAAQ,CAAC;AAGxE,WAAO,MAAM;AACX,eAAS,oBAAoB,SAAS,iBAAiB,EAAE,QAAQ,CAAC;AAAA,IACpE;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,OAAO,CAAC;AAChC;","names":[]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@usefy/use-click-any-where",
+  "version": "0.0.8",
+  "description": "A React hook for detecting document-wide click events",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.0",
+    "jsdom": "^27.3.0",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/geon0529/usefy.git",
+    "directory": "packages/use-click-any-where"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "hooks",
+    "click",
+    "document",
+    "event-listener",
+    "click-anywhere"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  }
+}