typescript 59 lines · 8 steps

Building a scroll-spy hook in React

A custom hook uses IntersectionObserver to track which page section is in view and highlights the matching nav link.

Explained by highlit

React Intermediate custom-hooks intersectionobserver dom-observation state-management accessibility

1import { useEffect, useState } from "react";
2 
3interface Section {
id: string;
label: string;
6}
7 
8export function useScrollSpy(sections: Section[], offset = 96) {
const [activeId, setActiveId] = useState(sections[0]?.id ?? "");
10 
useEffect(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      const visible = entries
        .filter((entry) => entry.isIntersecting)
        .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
17 
      if (visible.length > 0) {
        setActiveId(visible[0].target.id);
      }
    },
    {
      rootMargin: `-${offset}px 0px -55% 0px`,
      threshold: [0.1, 0.5, 1],
    }
  );
27 
  const nodes = sections
    .map((section) => document.getElementById(section.id))
    .filter((node): node is HTMLElement => node !== null);
31 
  nodes.forEach((node) => observer.observe(node));
  return () => observer.disconnect();
}, [sections, offset]);
35 
return activeId;
37}
38 
39export function ScrollSpyNav({ sections }: { sections: Section[] }) {
const activeId = useScrollSpy(sections);
41 
return (
  <nav aria-label="On this page">
    <ul>
      {sections.map((section) => (
        <li key={section.id}>
          <a
            href={`#${section.id}`}
            aria-current={activeId === section.id ? "location" : undefined}
            className={activeId === section.id ? "nav-link active" : "nav-link"}
          >
            {section.label}
          </a>
        </li>
      ))}
    </ul>
  </nav>
);
59}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1IntersectionObserver reports visibility changes efficiently, avoiding manual scroll-event math.
2Wrapping observer setup and teardown in useEffect keeps subscriptions in sync with props.
3Deriving aria-current from active state makes the current section clear to assistive tech.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';