MENU


useOutsideAlerter

In a bundler-based project this hook would normally live in its own file, imported with 'import React, { useRef, useEffect } from "react";' and exported with 'export default function OutsideAlerter(props) {...}'. Below it's inlined into one runnable page instead, with a demo box added so you can try clicking inside vs. outside it.
RESETRUNFULL
<!DOCTYPE html><html><head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head><body>
<div></div>
<script type="text/babel">
const { useRef, useEffect } = React;
function useOutsideAlerter(ref) {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target))
        alert("You clicked outside of me!");
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
}
function OutsideAlerter(props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);
  return <div ref={wrapperRef}>{props.children}</div>;
}
function App() {
  return (
    <OutsideAlerter>
      <div style={{border:'1px solid black', padding:'20px', width:'200px'}}>
        Click outside this box.
      </div>
    </OutsideAlerter>
  );
}
const root = ReactDOM.createRoot(document.querySelector("div"));
root.render(<App/>);
</script>
</body></html>