{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-mutation-observer",
  "title": "UseMutationObserver",
  "description": "Observes changes to the DOM using the Mutation Observer API",
  "files": [
    {
      "path": "registry/hooks/use-mutation-observer.tsx",
      "content": "'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\n// Types\ntype UseMutationObserverProps<T extends HTMLElement = HTMLElement> = {\n  target: React.RefObject<T | null>;\n  options?: MutationObserverInit;\n  callback: MutationCallback;\n};\n\nexport function useMutationObserver<T extends HTMLElement = HTMLElement>({\n  target,\n  options = {\n    attributes: true,\n    childList: true,\n    subtree: true,\n  },\n  callback,\n}: UseMutationObserverProps<T>) {\n  const observerRef = useRef<MutationObserver | null>(null);\n  const prevTargetRef = useRef<T | null>(null);\n\n  const disconnect = useCallback(() => {\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    const node = target.current;\n    if (!node) return;\n\n    if (prevTargetRef.current !== node) {\n      disconnect();\n      prevTargetRef.current = node;\n    }\n\n    observerRef.current = new MutationObserver(callback);\n    observerRef.current.observe(node, options);\n    return () => {\n      disconnect();\n    };\n  }, [target, options, callback, disconnect]);\n\n  return {\n    disconnect,\n  };\n}\n",
      "type": "registry:hook",
      "target": "hooks/guarahooks/use-mutation-observer.tsx"
    }
  ],
  "categories": [
    "ui-and-dom"
  ],
  "type": "registry:hook"
}