src/utils/hooks/use-mutation-observer.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { useEffect } from 'react';

type UseMutationObserverProps = {
  callback: () => void;
  options: MutationObserverInit;
  nodeOrSelector: string | HTMLElement;
};

export const useMutationObserver = ({
  callback,
  options,
  nodeOrSelector,
}: UseMutationObserverProps) => {
  useEffect(() => {
    const targetNode =
      typeof nodeOrSelector === 'string'
        ? document.querySelector(nodeOrSelector)!
        : nodeOrSelector;

    const observer = new MutationObserver(callback);

    observer.observe(targetNode, options);

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