PageNumber

Renders the current page number and total pages.

A convenience wrapper around Text that uses react-pdf's render prop to display page numbering. Defaults to "1 / 5" format.

Demo

Default format

tsx

import { Document, Page, Block, Text, PageNumber, Tailwind } from "@ui-registries/pdf";
<Tailwind>  <Document>    <Page size="A4" className="p-12 bg-white">      <Block className="flex flex-col gap-4">        <Text className="text-base text-gray-700">          Document content goes here.        </Text>      </Block>      <PageNumber className="text-xs text-gray-400 text-center mt-8" />    </Page>  </Document></Tailwind>

Custom format

Use the render prop to customize the output:

tsx

<PageNumber  className="text-sm text-gray-500"  render={({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`}/>

tsx

<PageNumber  className="text-xs"  render={({ pageNumber }) => `— ${pageNumber} —`}/>

Props

Prop	Type	Default
`className?`	`string`	—
`render?`	`((info: { pageNumber: number; totalPages: number; }) => React.ReactNode)`	—
`style?`	`Style`	—
`break?`	`boolean` Force the wrapping algorithm to start a new page when rendering the element.	—
`debug?`	`boolean` Enables debug mode on page bounding box.	—
`fixed?`	`boolean` Render component in all wrapped pages.	—
`hyphenationCallback?`	`HyphenationCallback` Override the default hyphenation-callback	—
`hyphenationPenalty?`	`number` Override the default hyphenation penalty Defaults to 100 for justified text and 600 otherwise.	—
`id?`	`string`	—
`minPresenceAhead?`	`number` Hint that no page wrapping should occur between all sibling elements following the element within n points	—
`orphans?`	`number` Specifies the minimum number of lines in a text element that must be shown at the bottom of a page or its container.	—
`widows?`	`number` Specifies the minimum number of lines in a text element that must be shown at the top of a page or its container..	—
`wrap?`	`boolean` Enable/disable page wrapping for element.	—