components / toc

toc.

sticky table-of-contents with scroll-spy highlighting via IntersectionObserver. give it the page headings; the active row tracks scroll. behavior split into a headless useToc hook.

introduction

scroll this panel or click a row on the right — the active row follows whichever section is in view.

only this panel scrolls; the page around it stays put.

installation

scroll this panel or click a row on the right — the active row follows whichever section is in view.

only this panel scrolls; the page around it stays put.

usage

scroll this panel or click a row on the right — the active row follows whichever section is in view.

only this panel scrolls; the page around it stays put.

api reference

scroll this panel or click a row on the right — the active row follows whichever section is in view.

only this panel scrolls; the page around it stays put.

installation
bunx @justin06lee/chrome@latest add toc
props
nametypedefaultdescription
headings *TocHeading[]-{ id, text }[] — ids must exist in the DOM.
labelstring'on this page'
containerRefObject<HTMLElement | null>-scrollable element the headings live in. scroll-spy and click scrolling stay inside it; defaults to the document.