React

Format's React SDK provides bindings to our underlying document syntax

Installation

Use the Format CLI to install the @format.dev/react package.

npx format add react

pnpm dlx format add react

yarn dlx format add react

bun x format add react

Example

An invoice document using the React SDK. The structural components are Document, Layout, Flow, and Stream; each takes props that map to the same attributes the document model uses.

An exported RenderProps<T> types the entry function. Format calls it with the active data variant on data, and the generic fixes that variant's shape.

index.tsx

import { Document, Flow, Layout, type RenderProps, Stream } from '@format.dev/react'
import './style.css'

interface Invoice {
	invoiceNo: string
	customerFullName: string
	customerType: string
	issueDate: string
	lineItems: LineItem[]
}

interface LineItem {
	name: string
	amount: number
}

export default function InvoiceDocument({ data }: RenderProps<Invoice>) {
	const { invoiceNo, customerFullName, customerType, issueDate, lineItems } = data

	const title = `Invoice #${invoiceNo}`
	const subject = `Invoice for ${customerFullName}, issued on ${issueDate}`

	return (
		<Document title={title} subject={subject} author='Acme Co.' keywords={['Invoice', customerType]}>
			<Layout id='invoice' width={793.71} height={1122.52}>
				<header>{title}</header>

				<Flow>
					<table>
						<thead>
							<tr><th>Item</th><th>Amount</th></tr>
						</thead>
						<tbody>
							<Stream>
								{lineItems.map((item, i) => (
									<tr key={i}>
										<td>{item.name}</td>
										<td>${item.amount.toLocaleString()}</td>
									</tr>
								))}
							</Stream>
						</tbody>
					</table>
				</Flow>

				<Flow splitGranularity='sentence'>
					{/* invoice terms: paragraphs flow across pages */}
				</Flow>
			</Layout>
		</Document>
	)
}

The first Flow is scaffolded: the <table> header repeats on every page while the rows inside the Stream paginate. The second Flow is bare, so its <p> is the stream and splits at sentence boundaries when it overruns a page.

Documentation for every exported component lives in the Document model section. Each type page has a React tab showing the SDK form alongside Vue and HTML.

Was this page helpful?