useScrollProgress

Track how far a user has scrolled down the page, returning a value from 

10
to 
1100
.

✅ Features

  • Scroll position in percentage
  • Great for scroll indicators and progress bars
  • Auto-updates on scroll

📦 Usage

1import { useScrollProgress } from './useScrollProgress';
2
3const progress = useScrollProgress();
4
5return <div style={{ width: `${progress}%` }} className="h-1 bg-blue-500" />;

📋 Source Code

This is the full implementation of useScrollProgress

1import { useState, useEffect } from 'react';
2
3export function useScrollProgress(): number {
4  const [progress, setProgress] = useState(0);
5
6  useEffect(() => {
7    const update = () => {
8      const scrollTop = window.scrollY;
9      const height = document.body.scrollHeight - window.innerHeight;
10      setProgress((scrollTop / height) * 100);
11    };
12
13    window.addEventListener('scroll', update);
14    return () => window.removeEventListener('scroll', update);
15  }, []);
16
17  return progress;
18}
19