🔧 Refactor: Enhance useOutsideAlerter

👀 Improve readability and maintainability
🧹 Remove redundant imports and comments
🌟 Add useNcId utility function
🚀 Ready for improved user interaction!

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, "_")}`;
+}

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;