Page Minimap

Мини-карта длинной страницы с видимой областью. Бесплатно, MIT · Контент и соцсети › Интерактивные объяснения

Установка

npx valyro-cli@latest add page-minimap

npx shadcn@latest add https://valyro.xyz/r/page-minimap.json

npm install valyro-ui

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

Prop	Type	Default
`sections` *	`MinimapSection[]`		The sections, in document order.
`scrollContainer`	`HTMLElement \| null`	`null`	The element that scrolls; null (default) means the page itself.
`maxHeight`	`number`	`320`	Upper limit of the map's height, px. Default 320; it is also kept within the screen.
`headerOffset`	`number`	`0`	Height of a fixed header over the content, px: jumps land below it. Default 0.
`hideWhenFits`	`boolean`	`true`	Hide the map when everything fits without scrolling. Default true.
`placement`	`'inline' \| 'fixed'`	`'inline'`	`inline` (default) in the flow, or `fixed` to the inline end of the screen.
`onActiveChange`	`(id: string \| null) => void`		Called when the section the reader is in changes.
`onNavigate`	`(id: string) => void`		Called when the reader picks a section in the map.
`labels`	`Partial<PageMinimapLabels>`		Overrides for the built-in English text; keys left out keep their defaults.