feat: add use-click-outside

docs/src/pages/_meta.json

@@ -39,6 +39,7 @@
     "title": "Hooks"
   },
   "use-abortable-effect": {},
+  "use-click-outside": {},
   "use-clipboard": {},
   "use-component-will-receive-update": {},
   "use-composition-input": {},

docs/src/pages/use-click-outside.mdx

@@ -0,0 +1,23 @@
+---
+title: useClickOutside
+---
+
+# useClickOutside
+
+import ExportMetaInfo from '../components/export-meta-info';
+
+<ExportMetaInfo />
+
+`useClickOutside` calls the callback you provide when a click event occurs outside the element associated with the returned ref
+
+### Usage
+
+```tsx copy
+import { useClickOutside } from 'foxact/use-click-outside';
+
+function Component() {
+  const ref = useClickOutside<HTMLDivHTML>(() => {
+    console.log('clicked outside the div');
+  });
+  return <div ref={ref}>...</div>
+```

src/use-click-outside/index.ts

@@ -0,0 +1,21 @@
+import 'client-only';
+import type { RefObject } from 'react';
+import { useRef, useEffect } from 'react';
+
+export function useClickOutside<T extends HTMLElement>(cb: () => void): RefObject<T> {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const handleClick = ({ target }: MouseEvent) => {
+      if (target && ref.current && !ref.current.contains(target as Node)) {
+        cb();
+      }
+    };
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [cb]);
+
+  return ref;
+}