DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cher
Cher

Posted on

Disabling click events outside of your popup

Never inject an overlay div again (unless you want to πŸ˜‰).

useLayoutEffect(
    () => {
      const {current: menuDOM} = menuRef;
      const body = window.document.querySelector('body');
      if (menuDOM && isOpen) {
        body.style['pointer-events'] = 'none';
        menuDOM.style['pointer-events'] = 'initial';
      } else if (menuDOM && !isOpen) {
        body.style['pointer-events'] = null;
        menuDOM.style['pointer-events'] = null;
      }
    },
    [isOpen]
  );
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Become a Moderator Can you help us make DEV a better place?

Fill out this survey and help us by becoming a tag moderator here at DEV.