Skip to main content

Introduction

react-pdfmake-reconciler is a package that helps you create PDF documents using React JSX and pdfmake.

Motivation​

There are multiple JavaScript PDF packages already out there that provide the capability of creating PDFs. However, one might still prefer some features of pdfmake, e.g. Duplicate table headers when tables go across pages. However, working with pdfmake's content objects directly in more complex projects may increase difficulties in code organization, especially when organizing contents in component functions.

Here are some pain points you may come across without using this library:

  • Passing the same set of arguments repetitively down nested functions.
  • Difficulties in debugging complex PDFs made with pdfmake.
  • Organizing components as functions differentiates return type between Content[] and Content

Having encountered these issues, I began working on this library as a weekend project.

Features​

React pdfmake Reconciler is a package that utilizes React JSX for document preparation. Using react-reconciler under the hood, developers are free to use most of React's feature with this library.

React pdfmake Reconciler's features include:

  • 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 (<pdf-*> components)
  • React Developer Tools support
  • Styled API