import {userRef,UseEffect} from "react"
function App()=>{
const refOne = useRef(null);
useEffect(() => {
document.addEventListener("click", handleClickOutside, true);
}, []);
const handleClickOutside = (e) => {
if (refOne.current && !refOne.current.contains(e.target)) {
console.log("clicked outside");
} else {
console.log(`clicked inside div`);
}
};
return(
<div style={{width:"10rem",height:"10rem", backGround:"red"}}>
</div>)
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter