Create a React Progress Bar Component

Oui oui, c'est la petite barre qui se remplit lorsque vous scroller sur un article de kimdontdoit à l'heure de l'écriture de ce post. Connu aussi sous des termes comme une "scroll progress bar indicator", c'est un petit atout UX pour un lecteur.

Voici un component React pour l'indicateur de progrès de lecture que vous pouvez réutiliser et adapter à vos besoins.

import React, { useState, useEffect } from "react";

import * as classes from "./ScrollProgress.module.scss";

const ScrollProgress = ({ target }) => {
  const [readingProgress, setReadingProgress] = useState(0);

  const scrollListener = () => {
    if (!target.current) {
      return;
    }

    const element = target.current;

    const windowScrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop ||
      0;

    if (windowScrollTop <= element.offsetTop) {
      setReadingProgress(0);
    } else {
      setReadingProgress(
        ((windowScrollTop - element.offsetTop) /
          (element.clientHeight - element.offsetTop - window.innerHeight)) *
          100
      );
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", scrollListener);
    return () => window.removeEventListener("scroll", scrollListener);
  });

  return (
    <div className={classes.progressContainer}>
      <div
        className={classes.progress}
        style={{ width: `${readingProgress}%` }}
      />
    </div>
  );
};

export { ScrollProgress };

Une particularité de ce component est le ref target reçu en props pour que le progrès commence seulement lorsque l'élément fourni atteint le haut du navigateur (voir la variable windowScrollTop)