Skip to main content

PdfHeader & PdfFooter

Implemented using React Portals, you can define static/dynamic header and footer using <PdfHeader> and <PdfFooter>.

PdfHeader Props​

PdfFooter Props​

Example​

tsx
import { PdfHeader, PdfFooter } from "react-pdfmake-reconciler";
 
const staticHeader = (
  <PdfHeader>
    <pdf-text>Hello world!</pdf-text>
  </PdfHeader>
);
 
const dynamicFooter = (
  <PdfFooter>
    {(currentPage, pageCount, pageSize) => (
      <pdf-text>
        Page {currentPage} / {pageCount}
      </pdf-text>
    )}
  </PdfFooter>
);
tsx
import { PdfHeader, PdfFooter } from "react-pdfmake-reconciler";
 
const staticHeader = (
  <PdfHeader>
    <pdf-text>Hello world!</pdf-text>
  </PdfHeader>
);
 
const dynamicFooter = (
  <PdfFooter>
    {(currentPage, pageCount, pageSize) => (
      <pdf-text>
        Page {currentPage} / {pageCount}
      </pdf-text>
    )}
  </PdfFooter>
);

Regarding React Context​

The way how dynamic content is that the renderer statically renders the function separately, so Context doesn't penetrate into dynamic content, just like PdfRenderer. See also for workaround.