React pdfmake Reconciler

This package lets you create PDFs using pdfmake and React.


Installation

This package is available on NPM.

``shell
npm i react-pdfmake-reconciler
`

Features

- Write complex PDF in JSX. Render JSX into pdfmake content structure.
- Utilize React features like:
- Context. Note that outside React contexts do not penetrate into PDF renderer.
- Components
- Hooks
- Working React update loop, (although it is unlikely to trigger user events inside PDF.), e.g.
- async setState calls
- useEffect call
- TypeScript typing for pdfmake Components ( components)
- React Developer Tools support
- Styled API

!React Developer Tools Demo

Running demo

`shell
pnpm i
pnpm dev
`

Usage

See /demo and tests for more extensive examples.

$3

`tsx
///

import { PdfRenderer } from "react-pdfmake-reconciler/PdfRenderer";

const { unmount } = PdfRenderer.render(
Hello World!,
(document) => console.log(document),
);

/*
Console:
{
content: {
$__reactPdfMakeType: 'pdf-text',
text: 'Hello World!',
bold: true
}
}
*/

// Call unmount to detach node tree.
unmount();
`

`tsx
import { PdfRenderer } from "react-pdfmake-reconciler/PdfRenderer";

const document = PdfRenderer.renderOnce(Hello World!);
`

$3

Newly defined intrinsic elements by this package have the pdf- prefix. Roughly speaking, each type of pdfmake content object corresponds to one element type, where the property specifying the Content is mapped to the children prop. For example:

`tsx
const pdfMakeContent = {
text: "GitHub",
link: "https://www.github.com",
};

// is mapped to

const pdfNode = GitHub;
`

There are also virtual element types. For more information, read JSDocs in types for more information.

$3

You can easily define extra document definition props straight inside your JSX using . It is optional to put the body of the document inside this component.

Implemented using React Portals, you can define static/dynamic header and footer using and .

These components can appear anywhere within your JSX structure, although you may follow this convention for a better looking structure:

`tsx
import { PdfDocument, PdfHeader, PdfFooter } from "react-pdfmake-reconciler";

const pdfNode = (

{/ Example static header /}
This is a header
{/ Example dynmaic footer /}

{(pageNumber, pageCount) => (

Page {pageNumber} / {pageCount}

)}

{bodyGoesHere}

);
`

$3

provides an easy way to render your React pdfmake Reconciler JSX in the browser. You can also debug your PDF JSX using the React Developer Tools browser extension.

`tsx
import { FC, StrictMode } from "react";
import { PdfPreview } from "react-pdfmake-reconciler";

const App: FC = () => (



);
``