app/assets/javascripts/hooks/useOutsideClick.js
import { useEffect, useRef } from 'react';
// This is a custom hook that has an abstract implementation for tracking clicks outside of a tracked ref.
const useOutsideClick = (callback) => {
const ref = useRef();
useEffect(() => {
const handleClick = (event) => {
if (ref.current && !ref.current.contains(event.target)) {
callback();
}
};
document.addEventListener('click', handleClick, true);
return () => {
document.removeEventListener('click', handleClick, true);
};
}, [ref]);
return ref;
};
export default useOutsideClick;