{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-is-scrolled",
  "title": "useIsScrolled",
  "description": "A hook to check if an element is scrolled",
  "files": [
    {
      "path": "registry/hooks/use-is-scrolled.ts",
      "content": "'use client'\n\nimport * as React from 'react'\n\nexport type ScrollDirection = 'vertical' | 'horizontal' | 'both'\n\nexport function useIsScrolled(\n  ref: React.RefObject<Element | null>,\n  {\n    threshold = 10,\n    initial = false,\n    direction = 'both',\n  }: { threshold?: number, initial?: boolean, direction?: ScrollDirection } = {},\n) {\n  const [isScrolled, setIsScrolled] = React.useState(initial)\n\n  const handleScrollEvent = React.useEffectEvent(() => {\n    const element = ref.current\n\n    if (!element)\n      return\n\n    const scrollTop = element.scrollTop\n    const scrollLeft = element.scrollLeft\n\n    let scrolled = false\n    if (direction === 'vertical') {\n      scrolled = scrollTop > threshold\n    }\n    else if (direction === 'horizontal') {\n      scrolled = scrollLeft > threshold\n    }\n    else {\n      scrolled = scrollTop > threshold || scrollLeft > threshold\n    }\n\n    setIsScrolled(scrolled)\n  })\n\n  React.useEffect(() => {\n    const element = ref.current\n\n    if (!element)\n      return\n\n    const abortController = new AbortController()\n\n    element.addEventListener('scroll', handleScrollEvent, { passive: true, signal: abortController.signal })\n\n    return () => {\n      abortController.abort()\n    }\n  }, [ref, threshold, direction])\n\n  return isScrolled\n}\n",
      "type": "registry:hook",
      "target": "hookas/use-is-scrolled.ts"
    }
  ],
  "type": "registry:hook"
}