useScrollProgress.js

useScrollProgress.js

import { useEffect, useState } from "react";

export default function useScrollProgress() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const {
        scrollHeight,
        clientHeight,
        scrollTop
      } = document.documentElement;
      const winScroll = document.body.scrollTop || scrollTop;
      const height = scrollHeight - clientHeight;
      const scrolled = (winScroll / height) * 100;
      return setWidth(scrolled);
    };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return width;
}