@pexip-engage-public/utils 0.1.46

package/src/useEventListener.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+
+type Options = Pick<AddEventListenerOptions, "capture" | "passive" | "once">;
+
+type EventMap = HTMLElementEventMap & DocumentEventMap & WindowEventMap;
+
+export function useEventListener<K extends keyof EventMap>(
+  eventName: K,
+  handler: (event: EventMap[K]) => void,
+  element: HTMLElement | Document | Window = document,
+  options: Options = {},
+) {
+  const savedHandler = useRef<(event: EventMap[K]) => void>(null);
+  const { capture, once, passive } = options;
+
+  useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    const eventListener = (event: any) => savedHandler.current?.(event);
+
+    const opts = { capture, once, passive };
+    element.addEventListener(eventName, eventListener, opts);
+
+    return () => {
+      element.removeEventListener(eventName, eventListener, opts);
+    };
+  }, [eventName, element, capture, passive, once]);
+}

package/src/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,9 @@
+import { useLayoutEffect } from "react";
+
+/**
+ * During SSR, React emits a warning when calling useLayoutEffect.
+ * Since neither useLayoutEffect nor useEffect run on the server,
+ * we can suppress this by replace it with a noop on the server.
+ */
+export const useIsomorphicLayoutEffect =
+  typeof document !== "undefined" ? useLayoutEffect : () => {};