useClickOutside

Detecta clics fuera de un elemento. Útil para cerrar menús desplegables, modales o menús.

Importar

import { useClickOutside } from 'asterui'

Uso

function DropdownExample() {
  const [isOpen, setIsOpen] = useState(false)
  const ref = useClickOutside<HTMLDivElement>(() => setIsOpen(false))

  return (
    <div ref={ref}>
      <Button onClick={() => setIsOpen(true)}>Open</Button>
      {isOpen && <DropdownMenu>...</DropdownMenu>}
    </div>
  )
}

Parámetros

Parámetro	Tipo	Predeterminado	Descripción
handler	(event: MouseEvent | TouchEvent) => void	-	Callback cuando se hace clic fuera
enabled	boolean	true	Si el listener está activo

Valor de Retorno

Tipo	Descripción
RefObject<T>	Ref para adjuntar al elemento