Custom Hook to toggle Elements. Example: Dropdows

toggle_element.js

import { useState, useEffect, useRef } from 'react';

export default () => {
  const [open, setOpen] = useState(false);
  const outerNode = useRef(null);

  function handleClick() {
    setOpen(!open);
  }

  function handleClose(e) {
    if (outerNode.current.contains(e.target)) {
      // inside click
      return;
    }
    // outside click
    setOpen(false);
  }

  useEffect(() => {
    document.addEventListener('mousedown', handleClose);

    return () => {
      document.removeEventListener('mousedown', handleClose);
    };
  }, []);

  return [open, outerNode, handleClick];
};