useClickOutside

Detect clicks outside of a specified element and trigger a callback.

✅ Features

  • Clean and reliable
  • Type-safe
  • Great for dropdowns and modals

📦 Usage

1const ref = useClickOutside(() => setOpen(false))
2
3return (
4  <div ref={ref}>
5    <p>Click outside me to close.</p>
6  </div>
7)

📋 Source Code

This is the full implementation of useClickOutside

1import { useEffect } from 'react'
2
3export function useClickOutside(ref: React.RefObject<HTMLElement>, callback: () => void) {
4  useEffect(() => {
5    const handleClick = (e: MouseEvent) => {
6      if (ref.current && !ref.current.contains(e.target as Node)) {
7        callback()
8      }
9    }
10
11    document.addEventListener('mousedown', handleClick)
12    return () => document.removeEventListener('mousedown', handleClick)
13  }, [ref, callback])
14}
15