useEvent

A React hook to add and remove event listeners without the boilerplate.

Very often I found myself to write some sort of hook to use event listeners associated with the window, document, or refs; so I decide to write a little but useful hook that combines the logic for most of the elements.

Features

• Type-safe event mapping based on target element
• Supports Document, Window, HTMLElement, SVGElement, or RefObject
• Automatically cleans up with AbortController
• Dependency-aware reactivity (like useEffect)

Installation

Choose your package manager:

1npm i @util-hooks/use-event

1yarn add @util-hooks/use-event

1pnpm add @util-hooks/use-event

1bun add @util-hooks/use-event

Usage

First, you need to decide the target element.

1import { useEvent } from "@util-hooks/use-event";
2
3function App() {
4  // This will prevent the browser context menu from showing
5  // Useful for creating custom menus
6  useEvent(window, "contextmenu", event => {
7    event.preventDefault();
8  });
9
10  return (
11    <div>
12      <p>...</p>
13    </div>
14  );
15}

With effect dependencies:

1import { useState } from "react";
2import { useEvent } from "@util-hooks/use-event";
3
4function App() {
5  const [count, setCount] = useState<number>(0);
6  const buttonRef = useRef<HTMLButtonElement>(null);
7
8  // The `count` dependency ensure that the count value inside the callback
9  // stays up-to-date; if not inserted, it will log the first value even when increased,
10  // becoming stagnant.
11  useEvent(
12    buttonRef,
13    "click",
14    () => {
15      console.log(count);
16    },
17    [count]
18  );
19
20  return (
21    <div>
22      <button onClick={() => setCount(c => c + 1)}>
23        Click to increase: {count}
24      </button>
25    </div>
26  );
27}

License

MIT