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.
const currentPageId = useCurrentPageId() // string | undefined- The current page follows scrolling, whether by the user or by useScrollToPage.
- Returns
undefinedwhile there is no current page, such as before the Viewport mounts. - The id is session-scoped: don't persist it or reuse it across reloads.
Example
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>
)
}