0%
July 27, 2023

Detect Click Outside

react

// useOutsideClicked.ts

import { RefObject, useEffect, useState } from "react";

export default ({ ref }: { ref: RefObject<Element> }) => {
  const [outsideClicked, setOutsideClicked] = useState(true);
  useEffect(() => {
    function handleClickOutside(event: any) {
      if (ref.current && !ref.current.contains(event.target)) {
        setOutsideClicked(true);
      } else {
        setOutsideClicked(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);
  return { outsideClicked, setOutsideClicked };
};

Now we can customize the behaviour of our target component by using

  • the state outsideClicked and
  • setter setOutsideClicked.

A simple use case is a searchbar with dropdown.