You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
830 B
31 lines
830 B
import { useEffect } from 'react';
|
|
|
|
/**
|
|
* useClickOutside
|
|
*
|
|
* Simple hook to add an event listener to the body and allow a callback to
|
|
* be triggered when clicking outside of the target ref
|
|
*
|
|
* @param ref Any HTML Element ref
|
|
* @param callback Callback triggered when clicking outside of ref element
|
|
*/
|
|
const useClickOutside = (
|
|
ref: React.RefObject<HTMLElement>,
|
|
callback: (e: MouseEvent) => void
|
|
): void => {
|
|
useEffect(() => {
|
|
const handleBodyClick = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) {
|
|
callback(e);
|
|
}
|
|
};
|
|
document.body.addEventListener('click', handleBodyClick, { capture: true });
|
|
|
|
return () => {
|
|
document.body.removeEventListener('click', handleBodyClick);
|
|
};
|
|
}, [ref, callback]);
|
|
};
|
|
|
|
export default useClickOutside;
|