Receipt Zoom Viewer

ProNew

A receipt or document image with Fit width, 100% and 200% presets, pinch and double-tap zoom, and a text version of the key fields underneath for people who cannot use the image. Use this when a phone shows a scanned receipt, invoice or form that must be read closely.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

src

alt

Guide and examples

When to use it

Use it when a phone shows a scanned receipt, invoice or form that must be read closely.

Do not use it for photos that do not carry text, or as the only copy of important data (always provide the text).

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
`src`	`string`	`required`	The image.
`alt`	`string`	`required`	A summary of the document.
`fields`	`{ label: string; value: string }[]`	`required`	The key facts as text.

Accessibility

The facts are repeated as a description list, so the data does not depend on reading the image.
Presets are toggle buttons with the current zoom stated; zoom also works by pinch, double tap, keyboard and the built-in buttons.
The image has a meaningful alt that summarises the document.

Testing

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