dom

useClickOutside

Llama a un callback cuando el usuario hace clic fuera de un elemento referenciado. Ideal para cerrar dropdowns, modales y popovers.

useClickOutside.ts

import { useEffect, useRef } from "react"

export function useClickOutside<T extends HTMLElement>(
  callback: () => void
) {
  const ref = useRef<T>(null)

  useEffect(() => {
    function handleClick(event: MouseEvent) {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        callback()
      }
    }

    document.addEventListener("mousedown", handleClick)
    return () => document.removeEventListener("mousedown", handleClick)
  }, [callback])

  return ref
}

¿Fue útil?

Inicia sesión para dar feedback

Buscar

useClickOutside