`useClickOutside`

Fires a callback when the user clicks or taps outside a referenced element. Used internally by Dropdown and Search to close their menus, and useful for any dismissable overlay you build yourself.

Both click and touchstart are listened to, so taps on mobile dismiss correctly.


import { useRef, useState } from 'react'
import { useClickOutside } from '@wire-ui/react'
 
function Popover() {
  const ref = useRef<HTMLDivElement>(null)
  const [open, setOpen] = useState(true)
 
  useClickOutside(ref, () => setOpen(false))
 
  if (!open) return null
  return (
    <div ref={ref}>
      Click anywhere outside this box to close.
    </div>
  )
}

Parameters

Param	Type	Description
`ref`	`RefObject<HTMLElement \| null>`	Reference to the element to watch.
`callback`	`(event: MouseEvent \| TouchEvent) => void`	Called on outside click or tap. Receives the original DOM event.