Hooks

1"use client";
2 
3import * as React from "react";
4 
5export function useReducedMotion(): boolean {
6  const [reduced, setReduced] = React.useState(false);
7  React.useEffect(() => {
8    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
9    const on = () => setReduced(mq.matches);
10    on();
11    mq.addEventListener("change", on);
12    return () => mq.removeEventListener("change", on);
13  }, []);
14  return reduced;
15}
16 
17/** Index of the section currently crossing the middle band of the viewport. */
18export function useScrollspy(ids: string[]): number {
19  const [active, setActive] = React.useState(0);
20 
21  React.useEffect(() => {
22    if (!ids.length) return;
23    const seen = new Map<string, number>();
24    const io = new IntersectionObserver(
25      (entries) => {
26        for (const e of entries) seen.set(e.target.id, e.intersectionRatio);
27        // The last heading whose top has passed the band wins.
28        let next = 0;
29        ids.forEach((id, i) => {
30          const el = document.getElementById(id);
31          if (el && el.getBoundingClientRect().top <= window.innerHeight * 0.35) next = i;
32        });
33        setActive(next);
34      },
35      { rootMargin: "-30% 0px -60% 0px", threshold: [0, 0.5, 1] },
36    );
37    const els = ids.map((id) => document.getElementById(id)).filter(Boolean) as Element[];
38    els.forEach((el) => io.observe(el));
39 
40    const onScroll = () => {
41      let next = 0;
42      ids.forEach((id, i) => {
43        const el = document.getElementById(id);
44        if (el && el.getBoundingClientRect().top <= window.innerHeight * 0.35) next = i;
45      });
46      setActive(next);
47    };
48    onScroll();
49    window.addEventListener("scroll", onScroll, { passive: true });
50    return () => {
51      io.disconnect();
52      window.removeEventListener("scroll", onScroll);
53    };
54  }, [ids]);
55 
56  return active;
57}
58 
59/** 0→1 read progress through the first element matching the selector. */
60export function useReadProgress(selector = "#article-root"): number {
61  const [p, setP] = React.useState(0);
62  React.useEffect(() => {
63    const onScroll = () => {
64      const el = document.querySelector<HTMLElement>(selector);
65      if (!el) return;
66      const start = el.offsetTop;
67      const end = start + el.offsetHeight - window.innerHeight;
68      const y = window.scrollY;
69      const raw = end > start ? (y - start) / (end - start) : 0;
70      setP(Math.min(1, Math.max(0, raw)));
71    };
72    onScroll();
73    window.addEventListener("scroll", onScroll, { passive: true });
74// … truncated