React SDK

@pdfforge/react is the component library behind React & Next.js: a fromJSX() client plus PDF-aware components that compile to engine markers — real QR codes, vector charts, running headers, smart tables.

npm install @pdfforge/react

The client

import { PDFForge } from "@pdfforge/react";

const forge = new PDFForge(process.env.PDFFORGE_API_KEY!);
const pdf = await forge.fromJSX(<MyDocument />, { format: "A4" });

PDFForge from this package extends the core client — all core methods (html, url, template, resources) are available — and adds fromJSX(element, options). A standalone render(element) export turns JSX into self-contained HTML without calling the API (the react-email pattern, for PDF).

Layout components

Document

The root wrapper — emits the HTML skeleton with @page size and margins.

<Document format="A4" margin="2cm" landscape={false} css={globalsCss}>
  ...
</Document>

Props: format (A4 default), width/height, landscape, margin + marginTop/Bottom/Left/Right, css (string or array), className, lang.

PageBreak / NoBreak

<Section1 />
<PageBreak />          {/* force a break here */}
<NoBreak>              {/* never split this block across pages */}
  <SignatureBlock />
</NoBreak>

Header / Footer

Running bands repeated in the margin of every page — declare once:

<Header className="text-xs text-gray-400">ACME Inc. — Invoice</Header>
<Footer className="text-xs text-gray-400">Thank you for your business</Footer>

Table

A full-width <table> wired into smart page breaks: the <thead> repeats on every page and rows are never cut mid-height.

<Table className="text-sm">
  <thead><tr><th>Item</th><th>Total</th></tr></thead>
  <tbody>{items.map((i) => <tr key={i.id}><td>{i.name}</td><td>{i.total}</td></tr>)}</tbody>
</Table>

Data components

QRCode & Barcode

Compiled server-side into real, scannable codes (never a canvas screenshot):

<QRCode value="https://acme.co/verify/inv-042" size={140} />
<Barcode value="978020137962" type="ean13" />

Barcode types: code128 (default), code39, ean13, ean8, upca, qr. Props: showText (default true), height (default 60).

Chart

Vector SVG charts, print-crisp — six types: bar (default), line, pie, donut, area, hbar:

<Chart type="bar" data={[
  { label: "Jan", value: 30 },
  { label: "Feb", value: 52 },
]} />

// Multi-series
<Chart type="line" series={["2024", "2025"]} data={[
  { label: "Q1", value: [10, 14] },
  { label: "Q2", value: [12, 20] },
]} legend />

Props: title, height (default 200), palette, legend, valueLabels, series, stacked, per-point color.

Totals

An invoice totals table — you pass the line amounts, the engine does the maths (subtotal → optional discount → optional tax → total), so numbers always add up:

<Totals items={lineTotals} currency="FCFA" taxRate={18} />

Props: currency (default "FCFA"), discount, taxRate, and label overrides (subtotalLabel, discountLabel, taxLabel, totalLabel).

Next steps

• React & Next.js — integration guide, Tailwind compilation, route handlers.
• JavaScript SDK — the core client this package extends.
• Pagination & fit — how smart breaks treat your components.