useEventListener

Features

• Automatically removes the event listener when the component unmounts.
• Supports a ref object as a target element.
• You can specify event options such as capture, once, and passive.
• Full TypeScript support for event type.

Installation

Install the custom hook from your command line.

npm i @raddix/use-event-listener

Usage

Add an event to the window object

In this example, the handle function will be called when the click event is triggered on the window object.

By default, the event listener will be added to the global window object. Therefore, it is not necessary to specify the target object.

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

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

  useEventListener('click', handle);
};

Add an event to a element

In this example, the handle function will be called when the mousemove event is triggered on the div element.

To add an event listener to a element, you need to pass its ref to the target option.

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

Parameters

Configurable options