Files
my-links/inertia/hooks/use_click_outside.tsx
2024-10-07 01:33:59 +02:00

23 lines
620 B
TypeScript

import { RefObject, useEffect } from 'react';
// Source : https://stackoverflow.com/a/63359693
/**
* This Hook can be used for detecting clicks outside the Opened Menu
*/
export default function useClickOutside(
ref: RefObject<HTMLElement>,
onClickOutside: () => void
) {
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (ref?.current && !ref.current?.contains(event.target as any)) {
onClickOutside();
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, [ref, onClickOutside]);
}