PdfPreview

Test out PDF JSX in your browser and inspect with React Development Tools. This component runs the full React update loop as mentioned in PdfRenderer. So it will react to the typical rerendering signals (state update, parent rerender, etc.).

Props

Example

tsx
import { FC, StrictMode } from "react";
import { PdfPreview } from "react-pdfmake-reconciler";
 
export const App: FC = () => (
  <div>
    <PdfPreview>
      {/* Optional */}
      <StrictMode>
        {/* Only use components that resolves to pdf-* components from here on out. DOM elements won't work. */}
        <pdf-text>Hello World!</pdf-text>
      </StrictMode>
    </PdfPreview>
  </div>
);

tsx
import { FC, StrictMode } from "react";
import { PdfPreview } from "react-pdfmake-reconciler";
 
export const App: FC = () => (
  <div>
    <PdfPreview>
      {/* Optional */}
      <StrictMode>
        {/* Only use components that resolves to pdf-* components from here on out. DOM elements won't work. */}
        <pdf-text>Hello World!</pdf-text>
      </StrictMode>
    </PdfPreview>
  </div>
);

The PDF is then mounted onto your React app as an iframe. This only works well when you are debugging your PDF setup on a desktop browser. Try opening your React Development Tools, you should see the PDF section being mounted at the very bottom of the tree.

You should see something like this:

PdfContext.Provider
  └ Y ⬅️ The PdfTable component
    ├ Fragment key="0-0"
    ├ Fragment key="0-1"
    ├ Fragment key="1-0"
    └ Fragment key="1-1"

PdfContext.Provider
  └ Y ⬅️ The PdfTable component
    ├ Fragment key="0-0"
    ├ Fragment key="0-1"
    ├ Fragment key="1-0"
    └ Fragment key="1-1"

Regarding React Context

React Context does not penetrate through <PdfPreview>. If you need to pass in values within your Context, consider reapplying the Context inside.

tsx
// @filename: App.tsx
import React, { FC } from "react";
import { MyContext } from "./MyContext";
import { PreviewWrapper } from "./PreviewWrapper";
 
export const App: FC = () => (
  <div>
    {/* Normal app Context */}
    <MyContext.Provider value={{ bestSnack: "chips" }}>
      <PreviewWrapper />
    </MyContext.Provider>
  </div>
);
 
// @filename: PreviewWrapper.tsx
import React, { FC, StrictMode, useContext } from "react";
import { PdfPreview } from "react-pdfmake-reconciler";
import { MyContext } from "./MyContext";
import { PdfSnack } from "./PdfSnack";
 
export const PreviewWrapper: FC = () => {
  const myContext = useContext(MyContext);
 
  return (
    <PdfPreview>
      <StrictMode>
        {/* Forward needed Context for PDF rendering */}
        <MyContext.Provider value={myContext}>
          <PdfSnack />
        </MyContext.Provider>
      </StrictMode>
    </PdfPreview>
  );
};
 
// @filename: PdfSnack.tsx
import React, { FC, useContext } from "react";
import { MyContext } from "./MyContext";
 
export const PdfSnack: FC = () => {
  const { bestSnack } = useContext(MyContext);
 
  return <pdf-text>{bestSnack}</pdf-text>;
};
 
// @filename: MyContext.tsx
import { createContext, useContext } from "react";
 
interface MyContextType {
  bestSnack: string | null;
}
 
export const MyContext = createContext<MyContextType>({
  bestSnack: null,
});

tsx
// @filename: App.tsx
import React, { FC } from "react";
import { MyContext } from "./MyContext";
import { PreviewWrapper } from "./PreviewWrapper";
 
export const App: FC = () => (
  <div>
    {/* Normal app Context */}
    <MyContext.Provider value={{ bestSnack: "chips" }}>
      <PreviewWrapper />
    </MyContext.Provider>
  </div>
);
 
// @filename: PreviewWrapper.tsx
import React, { FC, StrictMode, useContext } from "react";
import { PdfPreview } from "react-pdfmake-reconciler";
import { MyContext } from "./MyContext";
import { PdfSnack } from "./PdfSnack";
 
export const PreviewWrapper: FC = () => {
  const myContext = useContext(MyContext);
 
  return (
    <PdfPreview>
      <StrictMode>
        {/* Forward needed Context for PDF rendering */}
        <MyContext.Provider value={myContext}>
          <PdfSnack />
        </MyContext.Provider>
      </StrictMode>
    </PdfPreview>
  );
};
 
// @filename: PdfSnack.tsx
import React, { FC, useContext } from "react";
import { MyContext } from "./MyContext";
 
export const PdfSnack: FC = () => {
  const { bestSnack } = useContext(MyContext);
 
  return <pdf-text>{bestSnack}</pdf-text>;
};
 
// @filename: MyContext.tsx
import { createContext, useContext } from "react";
 
interface MyContextType {
  bestSnack: string | null;
}
 
export const MyContext = createContext<MyContextType>({
  bestSnack: null,
});