Page navigation

Use usePdfJump to move the scroll viewport. Lector's page numbers start at 1, including currentPage and jumpToPage(1).

Previous, next, and direct input

This toolbar is a complete component. Mount <PageControls /> inside Root, above the bounded Pages wrapper from your first viewer.

"use client";
 
import { CurrentPage, TotalPages, usePdf, usePdfJump } from "@anaralabs/lector";
 
export default function PageControls() {
  const page = usePdf((state) => state.currentPage);
  const total = usePdf((state) => state.pdfDocumentProxy.numPages);
  const { jumpToPage } = usePdfJump();
 
  return (
    <div role="group" aria-label="Page navigation" style={{ display: "flex", gap: 8 }}>
      <button
        type="button"
        disabled={page <= 1}
        onClick={() => jumpToPage(page - 1, { behavior: "auto" })}
      >
        Previous page
      </button>
      <label>Page <CurrentPage style={{ width: 56 }} /></label>
      <span>of</span>
      <TotalPages />
      <button
        type="button"
        disabled={page >= total}
        onClick={() => jumpToPage(page + 1, { behavior: "auto" })}
      >
        Next page
      </button>
    </div>
  );
}

CurrentPage updates as you scroll. Its input commits on blur or Enter. For your own input, validate an integer from 1 through numPages before calling jumpToPage; that hook does not validate the range for you.

The exported NextPage and PreviousPage components are currently placeholders. Use the hook-based buttons above.

Jump options

jumpToPage(3, { align: "start", behavior: "auto" });

Use "auto" for immediate jumps and when the user prefers reduced motion. jumpToPage needs a mounted Pages container; before its virtualizer exists, the call does nothing. Changing setCurrentPage alone changes store state but does not scroll.

Restore a reading position

Pages accepts initialOffset in scroll pixels and reports changes through onOffsetChange. Save the offset under a document-specific key, then pass it when mounting that document again. The current callback only reports nonzero offsets, so reset a saved position explicitly when your app returns to the top.

Offsets depend on zoom, page sizes, and layout. For bookmarks that need to survive layout changes, save a page number or a highlight region instead.

Live example