Reading Progress

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface ReadingProgressProps extends React.ComponentProps<"div"> {
8  /** Which edge the bar pins to. */
9  position?: "top" | "bottom"
10  /** Bar thickness in pixels. */
11  thickness?: number
12  /** Measure this element instead of the whole document. */
13  target?: React.RefObject<HTMLElement | null>
14  /** Render nothing. Useful for pages that should not have a bar. */
15  disabled?: boolean
16}
17 
18export function ReadingProgress({
19  className,
20  position = "top",
21  thickness = 2,
22  target,
23  disabled = false,
24  style,
25  ...props
26}: ReadingProgressProps) {
27  const ref = React.useRef<HTMLDivElement>(null)
28 
29  React.useEffect(() => {
30    if (disabled) {
31      return
32    }
33 
34    let frame = 0
35 
36    const measure = () => {
37      const node = ref.current
38      if (!node) {
39        return
40      }
41 
42      let progress: number
43 
44      if (target?.current) {
45        const rect = target.current.getBoundingClientRect()
46        const scrollable = rect.height - window.innerHeight
47        progress = scrollable > 0 ? -rect.top / scrollable : 1
48      } else {
49        const scrollable =
50          document.documentElement.scrollHeight - window.innerHeight
51        progress = scrollable > 0 ? window.scrollY / scrollable : 1
52      }
53 
54      // Scrolling is the highest-frequency input there is, so the bar tracks
55      // it exactly. No transition, no easing, no perceived lag.
56      node.style.scale = `${Math.min(Math.max(progress, 0), 1)} 1`
57    }
58 
59    const onScroll = () => {
60      cancelAnimationFrame(frame)
61      frame = requestAnimationFrame(measure)
62    }
63 
64    measure()
65    window.addEventListener("scroll", onScroll, { passive: true })
66    window.addEventListener("resize", onScroll, { passive: true })
67    return () => {
68      window.removeEventListener("scroll", onScroll)
69      window.removeEventListener("resize", onScroll)
70      cancelAnimationFrame(frame)
71    }
72  }, [disabled, target])
73 
74  if (disabled) {
75    return null
76  }
77 
78  return (
79    <div
80      data-slot="reading-progress"
81      // Decorative. The scrollbar already carries this information, and a
82      // `progressbar` role without a live `aria-valuenow` announces worse than
83      // nothing at all.
84      aria-hidden="true"
85      className={cn(
86        "pointer-events-none fixed inset-x-0 z-50",
87        position === "top" ? "top-0" : "bottom-0",
88        className
89      )}
90      style={{ height: thickness, ...style }}
91      {...props}
92    >
93// … truncated