raddix

useClickOutside

Detecta eventos de click y touch fuera de un elemento específico.

El hook useClickOutside es especialmente útil para escenarios como cerrar ventanas modales, menús desplegables y otros componentes cuando un usuario interactúa fuera de ellos.

Instalación

Instale el custom hook desde su terminal.

npm i @raddix/use-click-outside

Uso

Ejemplo Básico

En este ejemplo, cuando el usuario hace clic fuera del modal, se cerrará.

import { useRef, useState } from 'react';
import { useClickOutside } from '@raddix/use-click-outside';


export const Example = () => {
  const [isOpen, setIsOpen] = useState(false);
  const refModal = useRef<HTMLDivElement>(null);


  useClickOutside(refModal, () => setIsOpen(false));


  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open modal</button>


      {isOpen && (
        <div ref={refModal}>
          <p>Click outside of the modal to close it</p>
        </div>
      )}
    </>
  );
};

API

Parámetros

NombreDescripciónRequiredTipo
refElemento DOM al que se hace referencia.YesRefObject
callbackEsta función se llama cada vez que se detecta un evento de clic fuera del elemento al que se hace referencia.Yesfunction