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.