diff --git a/components/utils/use-dom-observer.ts b/components/utils/use-dom-observer.ts
new file mode 100644
index 0000000..258fb2a
--- /dev/null
+++ b/components/utils/use-dom-observer.ts
@@ -0,0 +1,25 @@
+import { MutableRefObject, useEffect } from 'react'
+
+const useDOMObserver = (
+  ref: MutableRefObject<HTMLElement | null> | undefined,
+  callback: MutationCallback = () => {},
+) => {
+  const config = { attributes: false, childList: true, subtree: true }
+
+  useEffect(() => {
+    if (!ref || !ref.current) return
+    let unmount = false
+    const done: MutationCallback = (...params) => {
+      if (unmount) return
+      callback(...params)
+    }
+    const observer = new MutationObserver(done)
+    observer.observe(ref.current, config)
+    return () => {
+      unmount = true
+      observer.disconnect()
+    }
+  }, [ref])
+}
+
+export default useDOMObserver