@yamada-ui/use-event-listener/dist/index.mjs

Yamada UI useEventListener custom hook

"use client"

// src/index.ts
import { useCallbackRef } from "@yamada-ui/utils";
import { useCallback, useEffect, useRef } from "react";
var useEventListener = (target, event, handler, options) => {
  const listener = useCallbackRef(handler);
  useEffect(() => {
    const el = typeof target === "function" ? target() : target != null ? target : document;
    if (!el) return;
    el.addEventListener(
      event,
      listener,
      options
    );
    return () => {
      el.removeEventListener(
        event,
        listener,
        options
      );
    };
  }, [event, target, options, listener, handler]);
  return () => {
    const el = typeof target === "function" ? target() : target != null ? target : document;
    el == null ? void 0 : el.removeEventListener(
      event,
      listener,
      options
    );
  };
};
var useEventListeners = () => {
  const listeners = useRef(/* @__PURE__ */ new Map());
  const currentListeners = listeners.current;
  const add = useCallback(
    (el, event, listener, options) => {
      listeners.current.set(listener, { el, event, options });
      el.addEventListener(
        event,
        listener,
        options
      );
    },
    []
  );
  const remove = useCallback(
    (el, event, listener, options) => {
      el.removeEventListener(
        event,
        listener,
        options
      );
      listeners.current.delete(listener);
    },
    []
  );
  useEffect(
    () => () => {
      currentListeners.forEach(
        ({ el, event, options }, key) => remove(el, event, key, options)
      );
    },
    [remove, currentListeners]
  );
  return { add, remove };
};
export {
  useEventListener,
  useEventListeners
};
//# sourceMappingURL=index.mjs.map