In the browser · Inkoxide

Import them from @inkoxide/render/browser. Examples, and how these components work together, are in the guide.

usePdf

Renders element to a PDF in the engine's worker when the component mounts, and again on update(). A render that starts stops the one still running; unmounting stops it too. opts are read when a render starts.

const { url, loading, update } = usePdf(<Invoice invoice={invoice} />);

import { Document, Page, Text, usePdf } from '@inkoxide/render/browser';

const Letter = ({ name }: { name: string }) => (
  <Document>
    <Page size="A5" className="p-10">
      <Text>Dear {name},</Text>
    </Page>
  </Document>
);

export default function Preview({ name }: { name: string }) {
  const { url, loading, error, update } = usePdf(<Letter name={name} />);
  if (error) return <p>The PDF did not render.</p>;
  return (
    <>
      <button onClick={() => update(<Letter name={name} />)} disabled={loading}>
        {loading ? 'Rendering…' : 'Render again'}
      </button>
      {url && <iframe src={url} title="Letter" style={{ width: '100%', height: 600 }} />}
    </>
  );
}

Argument	Type	Default	Description
`element`	`ReactElement`
`opts`	`BrowserRenderOptions`	`{}`

It returns:

Field	Type	Description
`blob`	`Blob \| null`	The PDF of the last render that finished, or null.
`url`	`string \| null`	An object URL of `blob`, revoked when a new one replaces it and on unmount; or null.
`loading`	`boolean`	Whether a render is running.
`error`	`unknown`	Why the last render failed (a `RenderError`, usually), or null.
`update`	`(element?: ReactElement) => void`	Renders again: `element` when given, otherwise the last one.

PdfDownloadLink

A link that downloads document as a PDF, once it has rendered. It renders when it mounts: give it another key to render again.

import { Document, Page, PdfDownloadLink, Text } from '@inkoxide/render/browser';

const Receipt = () => (
  <Document>
    <Page size="A6" className="p-8">
      <Text className="text-lg font-bold">Receipt</Text>
    </Page>
  </Document>
);

export default function DownloadButton() {
  return (
    <PdfDownloadLink document={<Receipt />} fileName="receipt.pdf">
      {({ loading }) => (loading ? 'Rendering…' : 'Download the receipt')}
    </PdfDownloadLink>
  );
}

Prop	Type	Default	Description
`document` (required)	`ReactElement`		The `<Document>` element to render.
`fileName`	`string`	`document.pdf`	The name the file is saved under.
`options`	`BrowserRenderOptions`
`children`	`ReactNode \| ((pdf: UsePdfResult) => ReactNode)`		What the link shows, or a function of the render's state.

Other props go to the <a> element.

PdfViewer

document, rendered and shown in an <iframe>, in the browser's own PDF viewer. It renders when it mounts: give it another key to render again.

import { Document, Page, PdfViewer, Text } from '@inkoxide/render/browser';

const Receipt = () => (
  <Document>
    <Page size="A6" className="p-8">
      <Text className="text-lg font-bold">Receipt</Text>
    </Page>
  </Document>
);

export default function ReceiptPreview() {
  return <PdfViewer document={<Receipt />} fallback={<p>Rendering…</p>} style={{ width: '100%', height: 600 }} />;
}

Prop	Type	Description
`document` (required)	`ReactElement`	The `<Document>` element to render.
`options`	`BrowserRenderOptions`
`fallback`	`ReactNode`	Shown in place of the frame while the first render runs, or when it failed.

Other props go to the <iframe> element.