39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import { useEffect, RefObject } from "react";
|
|
|
|
export const useClickOutside = (
|
|
ref: RefObject<HTMLElement | null>,
|
|
handler: () => void,
|
|
isActive: boolean = true,
|
|
excludeRefs?: RefObject<HTMLElement | null>[]
|
|
) => {
|
|
useEffect(() => {
|
|
if (!isActive) return;
|
|
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(event.target as Node)) {
|
|
const isExcluded = excludeRefs?.some((excludeRef) =>
|
|
excludeRef.current?.contains(event.target as Node)
|
|
);
|
|
|
|
if (!isExcluded) {
|
|
handler();
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleEscape = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") {
|
|
handler();
|
|
}
|
|
};
|
|
|
|
document.addEventListener("click", handleClickOutside);
|
|
document.addEventListener("keydown", handleEscape);
|
|
|
|
return () => {
|
|
document.removeEventListener("click", handleClickOutside);
|
|
document.removeEventListener("keydown", handleEscape);
|
|
};
|
|
}, [ref, handler, isActive, excludeRefs]);
|
|
};
|