# useCurrentPageId

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



Returns the id of the page in the middle of the viewport, the one the user is reading, and re-renders the component when it changes. Use it for a "page 3 of 12" indicator or to highlight the current thumbnail.

```ts
const currentPageId = useCurrentPageId() // string | undefined
```

* The current page follows scrolling, whether by the user or by [useScrollToPage](https://sdk.pdf.net/docs/v1/reference/useScrollToPage).
* Returns `undefined` while there is no current page, such as before the [Viewport](https://sdk.pdf.net/docs/v1/reference/Viewport) mounts.
* The id is session-scoped: don't persist it or reuse it across reloads.

## Example [#example]

```tsx
import { useCurrentPageId, usePages } from '@sdk-pdf/react'

function PageIndicator() {
  const pages = usePages()
  const currentPageId = useCurrentPageId()

  const currentIndex = pages.findIndex((page) => page.id === currentPageId)
  if (currentIndex === -1) return null

  return (
    <span>
      Page {currentIndex + 1} of {pages.length}
    </span>
  )
}
```