2022-03-12 03:27:56 +00:00
|
|
|
import { useEffect } from 'react';
|
2022-02-20 11:51:55 +00:00
|
|
|
|
|
|
|
export function useClickOutside(
|
|
|
|
ref,
|
|
|
|
handler: { in?: (evt: MouseEvent) => void; out?: (evt: MouseEvent) => void }
|
|
|
|
) {
|
|
|
|
useEffect(() => {
|
|
|
|
const listener = (event) => {
|
|
|
|
if (!ref.current || ref.current.contains(event.target)) {
|
|
|
|
handler.in && handler.in(event);
|
|
|
|
} else {
|
|
|
|
handler.out && handler.out(event);
|
|
|
|
}
|
|
|
|
};
|
2022-03-12 03:27:56 +00:00
|
|
|
document.addEventListener('mousedown', listener);
|
|
|
|
document.addEventListener('touchstart', listener);
|
2022-02-20 11:51:55 +00:00
|
|
|
|
|
|
|
return () => {
|
2022-03-12 03:27:56 +00:00
|
|
|
document.removeEventListener('mousedown', listener);
|
|
|
|
document.removeEventListener('touchstart', listener);
|
2022-02-20 11:51:55 +00:00
|
|
|
};
|
|
|
|
}, [ref, handler]);
|
|
|
|
}
|