import React, { useRef, useEffect } from "react";
export default SomeFunctionComponent(props) {
const elementRef = useRef(null);
useEffect(() => {
function handleOutsideClick(event) {
if (ref.current && !ref.current.contains(event.target)) {
do something
}
}
document.addEventListener("mousedown", handleOutsideClick);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleOutsideClick);
};
}, [elementRef]);
}
return (
<div ref={elementRef}>{props.children}</div>;
)
}