Clicking Outside

In this challenge, you'll build a custom hook that allows us to run some code when the user clicks outside a particular DOM node.

Specifically, you'll use this hook to implement a popover that can be dismissed by clicking outside:

Difficulty

This is where things start to get a lot more difficult. This challenge touches on some of the most complex parts of working with modern React.

You may not be able to fully solve this problem, but as always, that's not really the most important thing. Most interviewers would be impressed even if you only get halfway through this challenge, but you're able to show your thought process and make some good progress.

Rules

You're allowed to google for general help (eg. looking up JavaScript methods), but please don't search for the full solution to this particular problem. The interviewer wants to see if you can work it out on your own!
No third-party packages.
You shouldn't have to disable any ESLint rules.

Playground

Code Playground

import React from 'react';

function App() {

const [isOpen, setIsOpen] = React.useState(false);

return (

<button

className="account-toggle-trigger"

aria-label="Toggle account dropdown"

onClick={() => setIsOpen(true)}

</button>

{isOpen && <div className="popover">

<li>

<a href="/account">My Account</a>

</li>

<li>

<a href="/stats">Statistics</a>

</li>

<li>

</li>

</ul>

</div>}

</div>

);

}

export default App;

My attempt

Attempt code (success)

Here's the final code from the video, with a couple of minor bits of polish (eg. removing console.log):

import React from 'react';

function useOnClickOutside(ref, callback) {
  React.useEffect(() => {
    function handleClick(event) {
      if (
        ref.current &&
        !ref.current.contains(event.target)
      ) {
        callback();
      }
    }

    window.addEventListener('click', handleClick);

    return () => {
      window.removeEventListener('click', handleClick);
    };
  }, [ref, callback]);
}

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const accountPopoverRef = React.useRef();

  const handleClickOutside = React.useCallback(() => {
    setIsOpen(false);
  }, []);

  useOnClickOutside(
    accountPopoverRef,
    handleClickOutside
  );

  return (
    <div className="wrapper">
      <div ref={accountPopoverRef}>
        <button
          className="account-toggle-trigger"
          aria-label="Toggle account dropdown"
          onClick={(event) => {
            setIsOpen(true);
          }}
        >
          <img alt="" src="/img/avatars/005.png" />
        </button>

        {isOpen && (
          <div className="popover">
            <ul className="account-links">
              <li>
                <a href="/account">My Account</a>
              </li>
              <li>
                <a href="/stats">Statistics</a>
              </li>
              <li>
                <a href="/logout">Log out</a>
              </li>
            </ul>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;