18 lines
1.9 KiB
JSON
18 lines
1.9 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "scroll-progress",
|
|
"type": "registry:ui",
|
|
"title": "Scroll Progress",
|
|
"description": "A scroll progress component that displays the progress of the scroll.",
|
|
"dependencies": [
|
|
"motion"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/components/scroll-progress/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport {\n motion,\n useScroll,\n useSpring,\n type HTMLMotionProps,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype ScrollProgressProps = React.ComponentProps<'div'> & {\n progressProps?: HTMLMotionProps<'div'>;\n};\n\nfunction ScrollProgress({\n ref,\n className,\n children,\n progressProps,\n ...props\n}: ScrollProgressProps) {\n const containerRef = React.useRef<HTMLDivElement | null>(null);\n React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n const { scrollYProgress } = useScroll(\n children ? { container: containerRef } : undefined,\n );\n\n const scaleX = useSpring(scrollYProgress, {\n stiffness: 250,\n damping: 40,\n bounce: 0,\n });\n\n return (\n <>\n <motion.div\n data-slot=\"scroll-progress\"\n {...progressProps}\n style={{ scaleX }}\n className={cn(\n 'fixed z-50 top-0 inset-x-0 h-1 bg-blue-500 origin-left',\n progressProps?.className,\n )}\n />\n {containerRef && (\n <div\n ref={containerRef}\n data-slot=\"scroll-progress-container\"\n className={cn('overflow-y-auto h-full', className)}\n {...props}\n >\n {children}\n </div>\n )}\n </>\n );\n}\n\nexport { ScrollProgress, type ScrollProgressProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/components/scroll-progress.tsx"
|
|
}
|
|
]
|
|
} |