Base Root

For simple usage, a base root context element and it's associated middleware are provided as BaseRootContext and basePDFGenerator

Usage

Certificate Element

import React from "react";
import { Page, View, Text } from "@react-pdf/renderer";

export const Certificate = ({ name, age }: CertificateProps) => {
  return (
    <Page size="A4" orientation="landscape">
      <View>
        <Text>
          {name} - {age}
        </Text>
      </View>
    </Page>
  );
};

Endpoint

import { ProgramCertificate } from "./template";
import { basePDFGenerator } from "express-react-pdf";

router.get(
  "/certificate",
  basePDFGenerator(Certificate, (req) => ({
    name: req.query.name,
    age: req.query.age,
  }))
);

Builder

The pdfMiddlewareBuilder can be used to create react-pdf middleware for your express server. This supports defining a new root context, as well as how to extract data from your request to populate your root.

Example - Integrating Other Frameworks

Note: this will soon be published as a package

Custom root contexts can be defined to integrate other frameworks, for example the i18Next translation library

Root Context

export const I18NextRootContext = ({
  translate,
  children,
}: I18NextRootContextProps & PropsWithChildren) => {
  return (
    <I18nextProvider i18n={translate}>
      <Document>{children}</Document>
    </I18nextProvider>
  );
};

Middleware

export const i18NextPDFMiddleware = pdfMiddlewareBuilder(
  I18NextRootContext,
  (req) => ({
    translate: req.i18n,
  })
);