@util-hooks/use-event

React useEvent hook

With this hook, you can easily access events on any desired target in the DOM, and provide a custom callback to execute all of your misdeeds.

Usage

You can pass any target you want, but in case you don't, the default target is the document element.

import { useEvent } from "@util-hooks/use-event";

const App = () => {
  // This will trigger any time the DOM is clicked.
  useEvent("click", evt => {
    evt.preventDefault();
    console.log("clicked on the document!");
  });

  return <div>Hello world!</div>;
};

export default App;

Usage with a target (ref):

import { useRef } from "react";
import { useEvent } from "@util-hooks/use-event";

const App = () => {
  const wrapperRef = useRef<HTMLDivElement>(null);

  // This will trigger any time the orange div is clicked.
  useEvent(wrapperRef, "click", evt => {
    evt.preventDefault();
    console.log("clicked on the orange div!");
  });

  return (
    <div
      ref={wrapperRef}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: "orange"
      }}
    >
      Hello world!
    </div>
  );
};

export default App;

Or you can use the window:

// ...

useEvent(window, "beforeunload", evt => {
  console.log("The app is about to reload!!!!");
});

// ...

Effect dependencies

Since this hook uses useEffect under the hood, if you have a state variable that you need to track, to prevent stale state, you can pass a dependency list as you would do with a normal useEffect:

import { useState, useRef } from "react";
import { useEvent } from "@util-hooks/use-event";

const App = () => {
  const [count, setCount] = useState<number>(0);
  const wrapperRef = useRef<HTMLDivElement>(null);

  const target = wrapperRef.current;

  // This will trigger any time the orange div is clicked.
  useEvent(
    target,
    "click",
    evt => {
      evt.preventDefault();
      setCount(count + 1);
      // Or, even better
      setCount(prev => prev + 1);
    },
    [count]
  );

  return (
    <div
      ref={wrapperRef}
      style={{
        width: "100px",
        height: "100px",
        backgroundColor: "orange"
      }}
    >
      {count}
    </div>
  );
};

Types

Type	Description
Target<T extends Element>	A union type that can be Document, Window, Element, or RefObject<T>.
EventMap<U extends Element, T extends Target<U>>	A conditional type that maps to DocumentEventMap if T extends Document, WindowEventMap if T extends Window, or HTMLElementEventMap otherwise.
Callback<U extends Element, T extends Target<U>, K extends keyof EventMap<U, T>, E extends EventMap<U, T>[K]>	A function type that takes an event of type E and returns void. E is an event type from EventMap<U, T>.
DependencyList	An array of dependencies for the useEffect hook. This is imported from react.
RefObject<T>	An object with a current property of type T. This is imported from react.
useEvent	A function that takes a target, event name, callback, and optional dependencies, and sets up an event listener on the target for the specified event.

Thanks

the tsup team, for making an awesome tool.

License

MIT License © Saverio Scagnoli 2024.