Thumbnails

Anatomy

<Thumbnails.Root width={140}>
	{#each { length: viewer.document.numPages } as _, i}
		<Thumbnails.Item pageNumber={i + 1} />
	{/each}
</Thumbnails.Root>

<Thumbnails.Root width={140}>
	{#each { length: viewer.document.numPages } as _, i}
		<Thumbnails.Item pageNumber={i + 1} />
	{/each}
</Thumbnails.Root>

Usage

Thumbnails render when scrolled into view, at low priority, and are cached per document (other thumbnail lists and the minimap reuse them). The current page’s item gets data-current and is kept in view.

API reference

`Thumbnails.Root`

Renders a <div> (or your element via child) and accepts its HTML attributes.

Prop	Type	Default
`width` Thumbnail width in CSS px. Default 120.	`number`	`120`
`followCurrent` Keep the current page's thumbnail scrolled into view. Default true.	`boolean`	`true`

Data attributes data-pdf-thumbnails

`Thumbnails.Item`

Renders a <button> (or your element via child) and accepts its HTML attributes.

Prop	Type	Default
`pageNumber` required	`number`	—

Snippet prop	Type
`pageNumber`	`number`
`label`	`string`
`isCurrent`	`boolean`
`rendered`	`boolean`
`canvasProps` Only given to `child`: spread it on your canvas host.	`ThumbnailCanvasProps`

Data attributes data-currentdata-partdata-pdf-thumbnaildata-pdf-thumbnail-canvasdata-rendered