Article Toc

Article table of contents that tracks the current section. Pro · Content and social › Reading and author

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add article-toc

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ArticleToc } from 'valyro-ui-pro';

Prop	Type	Default
`items` *	`ArticleTocItem[]`		Headings of the article, in reading order.
`activeId`	`string`		Section being read (controlled).
`defaultActiveId`	`string`		Initial section when uncontrolled.
`onActiveIdChange`	`(id: string) => void`		Called when scrolling reaches another section or a link is followed.
`track`	`boolean`	`true`	Follow the scroll position and mark the section being read (default true).
`offset`	`number`	`96`	Distance in px from the top of the viewport (or `container`) at which a heading counts as reached (default 96, below a sticky header).
`container`	`RefObject<HTMLElement \| null>`		Scrolling element that holds the article, when it is not the window (a reader pane, a modal).
`updateHash`	`boolean`	`true`	Put the section's `#id` in the address on click (default true), so it can be copied and shared. Turn it off in apps whose router reads the hash.
`smooth`	`boolean`	`true`	Scroll smoothly to the section on click (default true; off when the reader prefers reduced motion).
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the title (default 2).
`collapsible`	`boolean`	`false`	Fold the list under its title, a native disclosure that starts closed: for contents placed above the text on a phone rather than beside it.
`labels`	`Partial<ArticleTocLabels>`		Overrides for the built-in English text; keys left out keep their defaults.