useEventListener

Características

• Elimina automáticamente el event listener cuando el componente se desmonta.
• Admite un objeto de referencia como elemento de destino.
• Puede especificar opciones de evento como capture, once y passive.
• Soporte completo de TypeScript para el tipo de evento.

Instalación

Instala el custom hook desde su linea de comando.

npm i @raddix/use-event-listener

Usage

Agrega un evento al objeto global

En este ejemplo, se llamará a la función handle cuando se active el evento click en el objeto window.

De forma predeterminada, el detector de eventos se agregará al objeto global window. Por lo tanto, no es necesario especificar el objeto de destino.

import { useEventListener } from '@raddix/use-event-listener';

const Component = () => {
  const handle = () => {
    // Do something
  };

  useEventListener('click', handle);
};

Agrega un evento a un elemento

En este ejemplo, se llamará a la función handle cuando se produzca el evento mousemove en el elemento div.

Para agregar un detector de eventos a un elemento, debe pasar su ref a la opción target.

import { useState, useRef } from 'react';
import { useEventListener } from '@raddix/use-event-listener';

const Component = () => {
  const [coords, setCoords] = useState([0, 0]);
  const ref = useRef<HTMLDivElement>(null);

  useEventListener('mousemove', ({ offsetX, offsetY }) => {
    setCoords([offsetX, offsetY]);
  }, { target: ref });

  return <div ref={ref}>...</div>;
};

API

Parámetros

Opciones