Skip to main content

PdfRenderer

PdfRenderer is the custom React renderer powered by react-reconciler. React pdfmake Reconciler JSX can only be rendered by this renderer and not the typical React DOM renderer. There are 2 ways of rendering:

Static render​

The common way to render. This assumes you have all the prepared data and plan to generate the PDF for download or saving. This renders once and returns a TDocumentDefinitions to input to pdfmake for the PDF generation.

tsx
import { PdfRenderer } from "react-pdfmake-reconciler";
 
const doc = PdfRenderer.renderOnce(<pdf-text>Hello world!</pdf-text>);
tsx
import { PdfRenderer } from "react-pdfmake-reconciler";
 
const doc = PdfRenderer.renderOnce(<pdf-text>Hello world!</pdf-text>);

Render to React loop​

The rare way to render. This begins a React render loop, i.e. the React component itself (and/or its children) may trigger an update causing the rendered tree to update (e.g. async setStates from within). Whenever it renders initially or subsequently, the callback is triggered with the pdfmake TDocumentDefinitions of that instance.

tsx
import { PdfRenderer } from "react-pdfmake-reconciler";
 
const { unmount } = PdfRenderer.render(
  <pdf-text>Hello world!</pdf-text>,
  (updatedDoc) => {
    console.log("updated");
  },
);
 
// Unmounting will cause the renderer to stop rerendering on update and stop calling the callback.
unmount();
tsx
import { PdfRenderer } from "react-pdfmake-reconciler";
 
const { unmount } = PdfRenderer.render(
  <pdf-text>Hello world!</pdf-text>,
  (updatedDoc) => {
    console.log("updated");
  },
);
 
// Unmounting will cause the renderer to stop rerendering on update and stop calling the callback.
unmount();

Full example​

For the full example, see Quick start.