{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-element-size",
  "title": "useElementSize",
  "description": "A hook to measure the size of an element",
  "files": [
    {
      "path": "registry/hooks/use-element-size.ts",
      "content": "'use client'\n\nimport * as React from 'react'\n\nexport function useElementSize<T extends Element>(\n  ref: React.RefObject<T | null>,\n): { width: number | null, height: number | null }\nexport function useElementSize<T extends Element>(\n  ref: React.RefObject<T | null>,\n  initial: {\n    width: number\n    height: number\n  },\n): {\n  width: number\n  height: number\n}\nexport function useElementSize<T extends Element = Element>(\n  ref: React.RefObject<T | null>,\n  initial?: {\n    width: number\n    height: number\n  },\n) {\n  const [size, setSize] = React.useState({\n    width: initial?.width ?? null,\n    height: initial?.height ?? null,\n  })\n\n  const previousObserver = React.useRef<ResizeObserver | null>(null)\n\n  React.useEffect(() => {\n    const element = ref.current\n\n    if (previousObserver.current) {\n      previousObserver.current.disconnect()\n      previousObserver.current = null\n    }\n\n    let observer: ResizeObserver | null = null\n\n    if (element?.nodeType === Node.ELEMENT_NODE) {\n      observer = new ResizeObserver(([entry]) => {\n        if (entry && entry.borderBoxSize) {\n          const { inlineSize: width, blockSize: height }\n            = entry.borderBoxSize[0]!\n\n          setSize(prev => width !== prev.width || height !== prev.height ? { width, height } : prev)\n        }\n      })\n\n      observer.observe(element, { box: 'border-box' })\n      previousObserver.current = observer\n    }\n\n    return () => {\n      if (previousObserver.current) {\n        previousObserver.current.disconnect()\n        previousObserver.current = null\n      }\n    }\n  }, [ref])\n\n  return size\n}\n",
      "type": "registry:hook",
      "target": "hookas/use-element-size.ts"
    }
  ],
  "type": "registry:hook"
}