</>
typescriptbeginner

useClickOutside — Outside Click Detection

Detect clicks outside a referenced element to close dropdowns, modals, and popover menus.

typescript
import { useEffect, useRef, RefObject } from 'react';

export function useClickOutside<T extends HTMLElement>(
  handler: () => void
): RefObject<T | null> {
  const ref = useRef<T | null>(null);

  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      const el = ref.current;
      if (!el || el.contains(event.target as Node)) return;
      handler();
    };

    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

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

  return ref;
}

// Usage:
// const ref = useClickOutside<HTMLDivElement>(() => setOpen(false));
// <div ref={ref}>{open && <Dropdown />}</div>

Use Cases

  • Dropdown menus
  • Modal close behavior
  • Tooltip dismissal

Tags

#hooks#click-outside#dropdown#events

Related Snippets

Similar patterns you can reuse in the same workflow.

typescriptbeginner

useEventListener Hook

Safely add and clean up DOM event listeners with a type-safe hook supporting window, document, and elements.

Best for: Window resize handling

#react#hooks
typescriptbeginner

useClickAway Hook

Fires a callback when a click is detected outside the referenced element.

Best for: Dropdown close on outside click

#hooks#click-outside
typescriptintermediate

useFetch — Generic Data Fetching Hook

Custom React hook for data fetching with loading, error, and refetch states using the Fetch API.

Best for: API data fetching

#hooks#fetch
typescriptbeginner

useDebounce — Debounced Value Hook

Debounce any rapidly-changing value with a configurable delay. Useful for search inputs and resize handlers.

Best for: Search-as-you-type

#hooks#debounce