17 lines
513 B
TypeScript
17 lines
513 B
TypeScript
import { useEffect, type RefObject } from "react";
|
|
|
|
export function useClickOutside<T extends HTMLElement>(
|
|
ref: RefObject<T | null>,
|
|
onOutside: () => void,
|
|
enabled = true,
|
|
) {
|
|
useEffect(() => {
|
|
if (!enabled) return;
|
|
const handler = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) onOutside();
|
|
};
|
|
document.addEventListener("mousedown", handler);
|
|
return () => document.removeEventListener("mousedown", handler);
|
|
}, [ref, onOutside, enabled]);
|
|
}
|