Lector

Thumbnails clones one Thumbnail template for every page. Each thumbnail navigates to its page on click or Enter. Both thumbnails and pages must share the same Root.

Complete installation and create pdf-setup.ts before using this example.

thumbnail-viewer.tsx

"use client";
 
import {
  CanvasLayer, Page, Pages, Root, TextLayer, Thumbnail, Thumbnails,
} from "@anaralabs/lector";
import "./pdf-setup";
 
export default function ThumbnailViewer() {
  return (
    <Root
      source="/sample.pdf"
      isZoomFitWidth
      style={{ height: 600, display: "flex" }}
    >
      <aside aria-label="Page thumbnails" style={{ width: 160, flexShrink: 0, overflow: "auto" }}>
        <Thumbnails style={{ display: "grid", gap: 16, padding: 8 }}>
          <Thumbnail style={{ width: 128 }} aria-label="Go to this page" />
        </Thumbnails>
      </aside>
      <div style={{ flex: 1, minWidth: 0 }}>
        <Pages><Page><CanvasLayer /><TextLayer /></Page></Pages>
      </div>
    </Root>
  );
}

The sidebar scrolls independently. minWidth: 0 allows the main viewer to shrink when the sidebar takes space. Set a CSS width on Thumbnail; Lector owns the canvas's drawing dimensions.

Label individual pages

For specific labels and an active-page indicator, map thumbnails yourself inside a child of Root:

labeled-thumbnails.tsx

"use client";
 
import { Thumbnail, usePdf } from "@anaralabs/lector";
 
export default function LabeledThumbnails() {
  const count = usePdf((state) => state.pdfDocumentProxy.numPages);
  const current = usePdf((state) => state.currentPage);
 
  return (
    <div style={{ display: "grid", gap: 16 }}>
      {Array.from({ length: count }, (_, index) => {
        const page = index + 1;
        return (
          <div key={page}>
            <Thumbnail
              pageNumber={page}
              aria-label={`Go to page ${page}`}
              aria-current={current === page ? "page" : undefined}
              style={{ width: 128, outline: current === page ? "2px solid currentColor" : undefined }}
            />
            <span>Page {page}</span>
          </div>
        );
      })}
    </div>
  );
}

Keep a visible focus indicator in your app's styles. The built-in keyboard handler supports Enter; if your UI needs Space activation too, provide an onKeyDown handler that prevents the page scroll and activates the thumbnail.

Thumbnails creates a wrapper for every page; it is not the same virtualized list as Pages. Thumbnail canvas rendering is visibility-driven. For very large documents, measure the sidebar separately and consider mounting it only when opened.

Live example

Virtual thumbnails for long documents

For hundreds or thousands of pages, opt into a bounded list. Give Thumbnails a bounded height and specify the fixed height of each row, including spacing:

<Thumbnails
  style={{ height: 450, width: 140 }}
  virtualize={{ itemHeight: 150, overscan: 2 }}
>
  <Thumbnail style={{ height: 130, width: "auto" }} />
</Thumbnails>

The container owns scrolling and mounts only nearby rows. Ensure each child's content fits itemHeight; margins, padding and spacing belong inside that row. The default layout remains available by omitting virtualize.

With a thumbnail focused, Arrow Up/Down moves between pages, and Home/End moves to the first/last page, mounting the target before focusing it. Enter opens the focused page. Consumer keyboard handlers can call preventDefault() to override the virtual list's navigation keys.

Thumbnails

A sidebar layout

Label individual pages

Live example

Virtual thumbnails for long documents

On this page