29 lines
794 B
TypeScript
29 lines
794 B
TypeScript
|
import { type RefObject, useEffect } from "react";
|
||
|
|
|
||
|
|
export function useClickOutside<T extends HTMLElement>(
|
||
|
|
refs: RefObject<T | null>[],
|
||
|
|
handler: (event: MouseEvent | TouchEvent) => void,
|
||
|
|
): void {
|
||
|
|
useEffect(() => {
|
||
|
|
const handleClickOutside = (event: MouseEvent | TouchEvent) => {
|
||
|
|
if (
|
||
|
|
refs.some(
|
||
|
|
(ref) => ref.current && ref.current.contains(event.target as Node),
|
||
|
|
)
|
||
|
|
) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
handler(event);
|
||
|
|
};
|
||
|
|
|
||
|
|
document.addEventListener("mousedown", handleClickOutside);
|
||
|
|
document.addEventListener("touchstart", handleClickOutside);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
||
|
|
document.removeEventListener("touchstart", handleClickOutside);
|
||
|
|
};
|
||
|
|
}, [refs, handler]);
|
||
|
|
}
|