Skip to content

Instantly share code, notes, and snippets.

@levvsha
Created May 9, 2023 12:44
Show Gist options
  • Save levvsha/c49ec7caa47c0cedf2724278801e1dbc to your computer and use it in GitHub Desktop.
Save levvsha/c49ec7caa47c0cedf2724278801e1dbc to your computer and use it in GitHub Desktop.
useOnClickOutside react hook with TypeScript
function useOnClickOutside(
ref: React.RefObject<HTMLDivElement>,
handler: (event: TouchEvent | MouseEvent) => void,
) {
useEffect(() => {
const listener = (event: TouchEvent | MouseEvent) => {
if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
return;
}
handler(event);
};
document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);
return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
};
}, [ref, handler]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment