useClickOutside

Detect Outside Clicks. Perfect for closing modals or dropdowns when clicking outside, using a custom useClickOutside hook for better user experience

Contributed by @manjushsh

tsx

import { useRef, useEffect, RefObject } from "react";
 
function useClickOutside(handler: () => void): RefObject<HTMLDivElement> {
  const ref = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        handler();
      }
    };
 
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [handler]);
 
  return ref;
}

tsx

const ref = useClickOutside(() => setDropdownOpen(false));
 
return (
  <div ref={ref}>
    {dropdownOpen && <p>Dropdown Content</p>}
  </div>
);

Edit on GitHub