rad-event-listeners

Utility to add multiple event listeners, which can be individually removed, or all at once.

Also provides a signal that aborts on reentry, to help clean up processes set up in the event listener.

Inspired by rad-event-listener and @remix-run/interaction.

Usage

import { radEventListeners } from "rad-event-listeners";

const unsub = radEventListeners(
  window,
  {
    // signal aborts when next click event is fired
    click: (ev, signal) => console.log(ev, signal),
    keydown: [
      {
        handleEvent: (ev, signal) => console.log(ev, signal),
      },
      // Event options
      { once: true },
    ],
  },
  // Global options
  { passive: true },
);

unsub.click();
unsub();

rads

An alternative API, which passes the addEventListener function to a callback, and only returns a single unsubscribe function.

import { rads } from "rad-event-listeners";

const unsub = rads(
  window,
  (add) => {
    add("click", (ev) => console.log(ev));
    add("keydown", (ev) => console.log(ev), { once: true });
  },
  { passive: true },
);

// no individual unsubs
unsub();

Requirements

This uses AbortSignals (and specifically AbortSignal.any) to manage event listener removal. Check the MDN docs for browser/environment support.

Typescript

Similarly to rad-event-listener, this library attempts to infer the event types from the event target, using the on${EventName} properties.

If you're using a target that doesn't specify these properties, all event names will be allowed, and the event type will default to Event. You can then specify the event type manually.

import { radEventListeners } from "rad-event-listeners";

const unsub = radEventListeners(customTarget, {
  // This will default the event type to Event
  something(ev) {
    console.log(ev);
  },
  // but you can specify it manually
  custom(ev: CustomEvent) {
    console.log(ev.detail);
  },
});

Alternatively, use the rads function, which doesn't attempt to infer the event types.

import { rads } from "rad-event-listeners";

const unsub = rads(customTarget, (add) => {
  add("something", (ev) => console.log(ev));
  // because this is the original addEventListener function, it'll use whatever type the target specifies
  add("custom", (ev) => console.log(ev.detail));
});