From 9872e20763261c21c608495e334733625103774f Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sun, 10 Sep 2023 17:03:21 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactor:=20Enhance=20useOutside?=
 =?UTF-8?q?Alerter=20=F0=9F=91=80=20Improve=20readability=20and=20maintain?=
 =?UTF-8?q?ability=20=F0=9F=A7=B9=20Remove=20redundant=20imports=20and=20c?=
 =?UTF-8?q?omments=20=F0=9F=8C=9F=20Add=20useNcId=20utility=20function=20?=
 =?UTF-8?q?=F0=9F=9A=80=20Ready=20for=20improved=20user=20interaction!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useNcId.ts           |  6 ++++++
 src/hooks/useOutsideAlerter.ts | 31 +++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 src/hooks/useNcId.ts
 create mode 100644 src/hooks/useOutsideAlerter.ts

diff --git a/src/hooks/useNcId.ts b/src/hooks/useNcId.ts
new file mode 100644
index 0000000..e9dfdf4
--- /dev/null
+++ b/src/hooks/useNcId.ts
@@ -0,0 +1,6 @@
+import { useId } from "react";
+
+export default function useNcId(pre = "nc"): string {
+  const id = useId();
+  return `${pre}_${id.replace(/:/g, "_")}`;
+}
diff --git a/src/hooks/useOutsideAlerter.ts b/src/hooks/useOutsideAlerter.ts
new file mode 100644
index 0000000..35e3f2e
--- /dev/null
+++ b/src/hooks/useOutsideAlerter.ts
@@ -0,0 +1,31 @@
+"use client";
+import "client-only";
+
+import { useEffect } from "react";
+
+/**
+ * Hook that alerts clicks outside of the passed ref
+ */
+function useOutsideAlerter(
+  ref: React.RefObject<HTMLDivElement>,
+  handleClickOutsideCallback: () => void
+) {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        handleClickOutsideCallback();
+      }
+    }
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]); // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+export default useOutsideAlerter;