useClickOutside

The useClickOutside hook detects clicks (and touches) outside a specified element. This is commonly used for closing dropdowns, modals, and popovers.

Usage

import { useClickOutside } from '@/hooks';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  
  // Get ref that tracks outside clicks
  const ref = useClickOutside<HTMLDivElement>(() => {
    setIsOpen(false);
  });

  return (
    <div ref={ref}>
      <button onClick={() => setIsOpen(true)}>
        Open Menu
      </button>
      {isOpen && (
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
        </ul>
      )}
    </div>
  );
}

API

function useClickOutside<T extends HTMLElement = HTMLElement>(
  handler: () => void
): RefObject<T>

Parameters

Parameter	Type	Description
handler	() => void	Callback when click outside is detected

Returns

RefObject<T> - Attach this ref to the element you want to monitor.

Events Detected

• mousedown - Desktop click events
• touchstart - Mobile touch events

Use Cases

• Dropdown menus
• Modal overlays
• Popover content
• Context menus
• Search autocomplete