Intrinsic elements

This package defines the following list of intrinsic elements. See https://pdfmake.github.io/docs/0.1/document-definition-object/ for more information.

For more complete usages, please check out the PdfRenderer unit test on the GitHub repo.

Trivial elements

These are defined such that the reasonable content property is made the children of the element, and that property is made the name of the element. For example:

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
import type { ContentText } from "pdfmake/interfaces";
import { ReactNode } from "react";
 
// A pdfmake text object is defined like so:
const textObj: ContentText = {
  text: "Hello World!", // clearly the "children content" of this object
  bold: true,
};
 
// In react-pdfmake-reconciler, this is defined like so:
const textNode: ReactNode = <pdf-text bold>Hello World!</pdf-text>;

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
import type { ContentText } from "pdfmake/interfaces";
import { ReactNode } from "react";
 
// A pdfmake text object is defined like so:
const textObj: ContentText = {
  text: "Hello World!", // clearly the "children content" of this object
  bold: true,
};
 
// In react-pdfmake-reconciler, this is defined like so:
const textNode: ReactNode = <pdf-text bold>Hello World!</pdf-text>;

Here is the complete list of basic elements that require no further explanation:

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
const text = <pdf-text></pdf-text>;
                 
(property) PdfElements["pdf-text"]: PdfPropsWithChildren<Omit<ContentText, "text"> | Omit<ContentLink, "text"> | Omit<ContentAnchor, "text"> | Omit<ContentTocItem, "text">>
 
const columns = <pdf-columns></pdf-columns>;
                     
(property) PdfElements["pdf-columns"]: PdfPropsWithChildren<Omit<ContentColumns, "columns">>
 
const stack = <pdf-stack></pdf-stack>;
                  
(property) PdfElements["pdf-stack"]: PdfPropsWithChildren<Omit<ContentStack, "stack">>
 
const ol = <pdf-ol></pdf-ol>;
              
(property) PdfElements["pdf-ol"]: PdfPropsWithChildren<Omit<ContentOrderedList, "ol">>
 
const ul = <pdf-ul></pdf-ul>;
              
(property) PdfElements["pdf-ul"]: PdfPropsWithChildren<Omit<ContentUnorderedList, "ul">>
 
const table = <pdf-table></pdf-table>;
                  
(property) PdfElements["pdf-table"]: PdfPropsWithChildren<Omit<ContentTable, "table">>
 
const pageReference = <pdf-pageReference>ref</pdf-pageReference>;
                              
(property) PdfElements["pdf-pageReference"]: {
    children: string;
} & Omit<ContentPageReference, "pageReference">
 
const textReference = <pdf-textReference>ref</pdf-textReference>;
                              
(property) PdfElements["pdf-textReference"]: {
    children: string;
} & Omit<ContentTextReference, "textReference">
 
const image = <pdf-image image="myImage" />;
                  
(property) PdfElements["pdf-image"]: ContentImage
 
const svg = <pdf-svg svg="<svg></svg>" />;
               
(property) PdfElements["pdf-svg"]: ContentSvg
 
const qr = <pdf-qr qr="hello" />;
              
(property) PdfElements["pdf-qr"]: ContentQr
 
const canvas = <pdf-canvas canvas={[]} />;
                    
(property) PdfElements["pdf-canvas"]: ContentCanvas

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
const text = <pdf-text></pdf-text>;
                 
(property) PdfElements["pdf-text"]: PdfPropsWithChildren<Omit<ContentText, "text"> | Omit<ContentLink, "text"> | Omit<ContentAnchor, "text"> | Omit<ContentTocItem, "text">>
 
const columns = <pdf-columns></pdf-columns>;
                     
(property) PdfElements["pdf-columns"]: PdfPropsWithChildren<Omit<ContentColumns, "columns">>
 
const stack = <pdf-stack></pdf-stack>;
                  
(property) PdfElements["pdf-stack"]: PdfPropsWithChildren<Omit<ContentStack, "stack">>
 
const ol = <pdf-ol></pdf-ol>;
              
(property) PdfElements["pdf-ol"]: PdfPropsWithChildren<Omit<ContentOrderedList, "ol">>
 
const ul = <pdf-ul></pdf-ul>;
              
(property) PdfElements["pdf-ul"]: PdfPropsWithChildren<Omit<ContentUnorderedList, "ul">>
 
const table = <pdf-table></pdf-table>;
                  
(property) PdfElements["pdf-table"]: PdfPropsWithChildren<Omit<ContentTable, "table">>
 
const pageReference = <pdf-pageReference>ref</pdf-pageReference>;
                              
(property) PdfElements["pdf-pageReference"]: {
    children: string;
} & Omit<ContentPageReference, "pageReference">
 
const textReference = <pdf-textReference>ref</pdf-textReference>;
                              
(property) PdfElements["pdf-textReference"]: {
    children: string;
} & Omit<ContentTextReference, "textReference">
 
const image = <pdf-image image="myImage" />;
                  
(property) PdfElements["pdf-image"]: ContentImage
 
const svg = <pdf-svg svg="<svg></svg>" />;
               
(property) PdfElements["pdf-svg"]: ContentSvg
 
const qr = <pdf-qr qr="hello" />;
              
(property) PdfElements["pdf-qr"]: ContentQr
 
const canvas = <pdf-canvas canvas={[]} />;
                    
(property) PdfElements["pdf-canvas"]: ContentCanvas

Virtual elements

In addition to the above intrinsic elements, there are also these which are categorized as virtual elements. These are, in one way or another, specially treated by the renderer where the content key doesn't match the name, or they do not correlate to a rendered content object.

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
 
// react-pdf-reconciler only renders into arrays if the `children` contains more than 1 node.
// To force returning an array, use this element.
const array = <pdf-array></pdf-array>;
                  
(property) VirtualPdfElements["pdf-array"]: PdfPropsWithChildren<object>
 
// Use with <pdf-table>
const tbody = <pdf-tbody>{[]}</pdf-tbody>;
                  
(property) VirtualPdfElements["pdf-tbody"]: PdfPropsWithChildren<Omit<Table, "body">>
 
const cell = (
  <pdf-cell>
      
(property) VirtualPdfElements["pdf-cell"]: PassThroughPdfProps<TableCellProperties>
    <pdf-text></pdf-text>
  </pdf-cell>
);
 
// Use with <pdf-columns>
const column = (
  <pdf-column>
       
(property) VirtualPdfElements["pdf-column"]: PassThroughPdfProps<ColumnProperties>
    <pdf-text></pdf-text>
  </pdf-column>
);
 
// Use with <pdf-ol> or <pdf-ul>
const li = (
  <pdf-li>
     
(property) VirtualPdfElements["pdf-li"]: PassThroughPdfProps<OrderedListElementProperties | UnorderedListElementProperties>
    <pdf-text></pdf-text>
  </pdf-li>
);
 
// This is treated as a virtual element since the children is define to be the `title` prop.
const toc = <pdf-toc></pdf-toc>;
               
(property) VirtualPdfElements["pdf-toc"]: PdfPropsWithChildren<Omit<TableOfContent, "title">>

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
 
// react-pdf-reconciler only renders into arrays if the `children` contains more than 1 node.
// To force returning an array, use this element.
const array = <pdf-array></pdf-array>;
                  
(property) VirtualPdfElements["pdf-array"]: PdfPropsWithChildren<object>
 
// Use with <pdf-table>
const tbody = <pdf-tbody>{[]}</pdf-tbody>;
                  
(property) VirtualPdfElements["pdf-tbody"]: PdfPropsWithChildren<Omit<Table, "body">>
 
const cell = (
  <pdf-cell>
      
(property) VirtualPdfElements["pdf-cell"]: PassThroughPdfProps<TableCellProperties>
    <pdf-text></pdf-text>
  </pdf-cell>
);
 
// Use with <pdf-columns>
const column = (
  <pdf-column>
       
(property) VirtualPdfElements["pdf-column"]: PassThroughPdfProps<ColumnProperties>
    <pdf-text></pdf-text>
  </pdf-column>
);
 
// Use with <pdf-ol> or <pdf-ul>
const li = (
  <pdf-li>
     
(property) VirtualPdfElements["pdf-li"]: PassThroughPdfProps<OrderedListElementProperties | UnorderedListElementProperties>
    <pdf-text></pdf-text>
  </pdf-li>
);
 
// This is treated as a virtual element since the children is define to be the `title` prop.
const toc = <pdf-toc></pdf-toc>;
               
(property) VirtualPdfElements["pdf-toc"]: PdfPropsWithChildren<Omit<TableOfContent, "title">>