usePages

Returns the pages in document order and re-renders the component when pages are added, removed, rearranged, or their size or rotation changes.

const pages = usePages()

Each entry is a Page object:

• A page's position ("page 3 of 12") is its index in this list. The list is the bridge between positions and the id-based API: see Building a PDF application for why pages are addressed by id.
• The entries are snapshots: they don't update in place, and changing them doesn't change the document. The hook returns a new array when a page changes, and the same array otherwise, so it is safe to use in dependency lists.
• Returns an empty array while no document is loaded.

Example

import { PageCanvas, usePages } from '@sdk-pdf/react'

function ThumbnailList() {
  const pages = usePages()

  return (
    <nav>
      {pages.map((page, index) => (
        <PageCanvas key={page.id} pageId={page.id} aria-label={`Page ${index + 1}`} />
      ))}
    </nav>
  )
}

When only the number of pages matters, usePageCount re-renders on fewer changes. The page the user is looking at comes from useCurrentPageId.