How to close a popup window in react?

Question

React

Good afternoon. The application has the ability to edit menu items. Each item has a button, which, when clicked, will display a pop-up menu. I plan to implement this using css classes. How to implement the collapse of this element when clicking on any other area?

Answer 1

Watch for clicks outside the root node :

function Modal(props) {
  const root = useRef();

  useEffect(() => {
    const onClick = e => root.current.contains(e.target) || закрытьОкно();
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div ref={root}>
      ...
    </div>
  );
}

Or make the root node span the entire page and track clicks on it :

function Modal(props) {
  return (
    <div
      className="modal-overlay"
      onClick={e => (e.currentTarget === e.target) && закрытьОкно()}
    >
      ...
    </div>
  );
}

.modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

Answer 2

Good afternoon. You need something like this
https://www.npmjs.com/package/react-onclickoutside