useOutsideClick.ts•729 B
import { useEffect, useRef } from "react";
export default function useOutsideClick<ElementType extends HTMLElement>(callbackFn: () => void, isEnabled = true) {
const rootElementRef = useRef<ElementType>(null);
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
const clickedElement = event.target;
if (clickedElement && rootElementRef.current && !rootElementRef.current?.contains(clickedElement as Node)) {
callbackFn();
}
}
if (isEnabled) {
document.addEventListener("click", handleClickOutside);
return () => {
document.removeEventListener("click", handleClickOutside);
};
}
}, [callbackFn, isEnabled]);
return rootElementRef;
}