Document Page Viewer

ProNew

A paged document viewer with Previous and Next buttons, a "Page 2 of 5" readout, a go-to-page field, swipe between pages when not zoomed and pinch zoom on each page. Use this when a phone shows a multi-page PDF-like document as page images and people jump around it.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when a phone shows a multi-page PDF-like document as page images and people jump around it.

Do not use it for long scrolling text (use plain content) or editing.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`pages`	`{ src: string; alt: string }[]`	`required`	Page images.

Accessibility

Previous and Next are named buttons disabled at the ends; the position is visible text and announced politely.
The go-to-page field is a labelled number input that validates the range and changes page on Enter.
Left and Right arrow keys on the page area change page unless zoomed in, where they pan.

Testing

The pattern ships with a Testing Library test (document-page-viewer.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a phone shows a multi-page PDF-like document as page images and people jump around it.

Do not use it for long scrolling text (use plain content) or editing.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`pages`	`{ src: string; alt: string }[]`	`required`	Page images.

Accessibility

Previous and Next are named buttons disabled at the ends; the position is visible text and announced politely.
The go-to-page field is a labelled number input that validates the range and changes page on Enter.
Left and Right arrow keys on the page area change page unless zoomed in, where they pan.

Testing

The pattern ships with a Testing Library test (document-page-viewer.test.tsx) that drives it through roles and the keyboard.