# usePages

Source: https://sdk.pdf.net/docs/v1/reference/usePages



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

```ts
const pages = usePages()
```

Each entry is a `Page` object:

| Field      | Meaning                                                                   |
| ---------- | ------------------------------------------------------------------------- |
| `id`       | The page id, session-scoped: don't persist it or reuse it across reloads. |
| `width`    | The page width in user-space units, after the rotation is applied.        |
| `height`   | The page height in user-space units, after the rotation is applied.       |
| `rotation` | The rotation angle in degrees, clockwise: `0`, `90`, `180`, or `270`.     |

* 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](https://sdk.pdf.net/docs/v1/guides/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 [#example]

```tsx
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](https://sdk.pdf.net/docs/v1/reference/usePageCount) re-renders on fewer changes. The page the user is looking at comes from [useCurrentPageId](https://sdk.pdf.net/docs/v1/reference/useCurrentPageId).