Invoice Document Viewer React component
Read an invoice as the customer sees it: a printed page you can zoom, page through other invoices, download as PDF and mark paid, with reminders and an activity trail beside it.
About the Invoice Document Viewer component
Invoice Document Viewer shows an invoice the way your customer receives it, as a printed page, so there are no surprises about what they see.
You can zoom in, step through other invoices, download a PDF, and mark it paid or send a reminder. Every action lands in the activity list beside it.
When to use it
Use it in billing tools, client portals and accounting screens where people check one invoice at a time.
For a long list of invoices, start with Invoice List and open this viewer from a row.
Installation
Add the Invoice Document Viewer component to your project with the shadcn CLI. It lands in components/invoice-document-viewer.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/invoice-document-viewerProps
<InvoiceDocumentViewer /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| invoices | ViewerInvoice[] | DEFAULT_INVOICES |
| seller Your business, printed at the top of the page. | { name: string; address: string[]; email: string } | DEFAULT_SELLER |
| currency | string | "£" |
| today Used to count days overdue. YYYY-MM-DD. | string | "2026-11-07" |
| sendMs How long sending a reminder takes, in milliseconds. | number | 900 |
| onMarkPaid | (invoice: ViewerInvoice) => void | — |
| onRemind | (invoice: ViewerInvoice) => void | — |
| onDownload Replace the built-in PDF with your own download. | (invoice: ViewerInvoice) => void | — |
| linkFor The link Copy link puts on the clipboard. | (invoice: ViewerInvoice) => string | (inv) => `https://pay.example.com/i/${inv.number.toLowerCase()}` |
- theme"dark" | "light"Default: "dark"
- invoicesViewerInvoice[]Default: DEFAULT_INVOICES
- seller
Your business, printed at the top of the page.
{ name: string; address: string[]; email: string }Default: DEFAULT_SELLER - currencystringDefault: "£"
- today
Used to count days overdue. YYYY-MM-DD.
stringDefault: "2026-11-07" - sendMs
How long sending a reminder takes, in milliseconds.
numberDefault: 900 - onMarkPaid(invoice: ViewerInvoice) => void
- onRemind(invoice: ViewerInvoice) => void
- onDownload
Replace the built-in PDF with your own download.
(invoice: ViewerInvoice) => void - linkFor
The link Copy link puts on the clipboard.
(invoice: ViewerInvoice) => stringDefault: (inv) => `https://pay.example.com/i/${inv.number.toLowerCase()}`
Invoice Document Viewer FAQ
- Does Download need a PDF library?
- No. It builds a simple one-page PDF in the browser. Pass onDownload to use your own file instead.
- Does Mark as paid record a payment?
- It updates the view and calls onMarkPaid. Recording the payment is up to your app.
- Why does zooming not push the page down?
- The page sits in a fixed-height area with its own scroll.
- How is overdue worked out?
- From the due date and today, both as UTC dates.
