23 lines
595 B
TypeScript
23 lines
595 B
TypeScript
|
import { useEffect } from "react";
|
||
|
|
|
||
|
|
export const useClickOutside = (
|
||
|
|
ref: React.RefObject<HTMLElement>,
|
||
|
|
callback: () => void
|
||
|
|
) => {
|
||
|
|
useEffect(() => {
|
||
|
|
const handleClickOutside = (event: MouseEvent) => {
|
||
|
|
if (ref.current && !ref.current.contains(event.target as Node)) {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Add event listener to document
|
||
|
|
document.addEventListener("mousedown", handleClickOutside);
|
||
|
|
|
||
|
|
// Cleanup event listener on component unmount
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
||
|
|
};
|
||
|
|
}, [ref, callback]);
|
||
|
|
};
|