{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-scroll-info",
  "title": "useScrollInfo",
  "description": "A hook to get the scroll info of an element",
  "files": [
    {
      "path": "registry/hooks/use-scroll-info.ts",
      "content": "'use client'\n\nimport * as React from 'react'\n\nexport interface ScrollInfo {\n  left: number\n  top: number\n  right: number\n  bottom: number\n}\n\nexport function useScrollInfo(ref: React.RefObject<HTMLElement | null>) {\n  const [scrollInfo, setScrollInfo] = React.useState<ScrollInfo>({\n    left: 0,\n    top: 0,\n    right: 0,\n    bottom: 0,\n  })\n\n  const updateScrollInfo = React.useCallback(() => {\n    const el = ref.current\n    if (!el)\n      return\n\n    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = el\n\n    setScrollInfo({\n      left: scrollLeft,\n      top: scrollTop,\n      right: scrollWidth - (scrollLeft + clientWidth),\n      bottom: scrollHeight - (scrollTop + clientHeight),\n    })\n  }, [ref])\n\n  React.useEffect(() => {\n    const el = ref.current\n    if (!el)\n      return\n\n    updateScrollInfo()\n\n    el.addEventListener('scroll', updateScrollInfo)\n    window.addEventListener('resize', updateScrollInfo)\n\n    return () => {\n      el.removeEventListener('scroll', updateScrollInfo)\n      window.removeEventListener('resize', updateScrollInfo)\n    }\n  }, [ref, updateScrollInfo])\n\n  return scrollInfo\n}\n",
      "type": "registry:hook",
      "target": "hookas/use-scroll-info.ts"
    }
  ],
  "type": "registry:hook"
}