preact-missing-hooks/src/useMutationObserver.ts

A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.

import { RefObject } from "preact";
import { useEffect } from "preact/hooks";

export type UseMutationObserverOptions = MutationObserverInit;

/**
 * A Preact hook to observe DOM mutations using MutationObserver.
 * @param target - The element to observe.
 * @param callback - Function to call on mutation.
 * @param options - MutationObserver options.
 */
export function useMutationObserver(
  targetRef: RefObject<HTMLElement | null>,
  callback: MutationCallback,
  options: MutationObserverInit
) {
  useEffect(() => {
    const node = targetRef.current;
    if (!node) return;

    const observer = new MutationObserver(callback);
    observer.observe(node, options);

    return () => observer.disconnect();
  }, [targetRef, callback, options]);
}