Styled

This package provides the styled() function. You can call it using a pdf-* tag name or your own component that passes through the style prop onto a pdf-* element.

One good use of this API is to provide themeable components using ThemeContext.

Basic usage

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
 
import { FC, ReactNode } from "react";
import { styled } from "react-pdfmake-reconciler";
import { StyleReference } from "pdfmake/interfaces";
 
const Text = styled("pdf-text")({
  color: "#f00",
});
 
// Define additional props for styling.
// isSuccess can leak into pdfmake output structure here
const StatusText = styled(Text)<{ isSuccess: boolean }>((props) => ({
  color: props.isSuccess ? "#0f0" : "#f00",
}));
// Set display name for styled components to find them easily in React Dev Tools
StatusText.displayName = "StatusText";
 
// When the underlying component controls what props goes into the vDOM,
// it can prevent styled props from polluting the output.
const SafeText: FC<{ style?: StyleReference; children?: ReactNode }> = ({
  style,
  children,
}) => <pdf-text style={style}>{children}</pdf-text>;
const StyledSafeText = styled(SafeText)<{ isSuccess: boolean }>((props) => ({
  color: props.isSuccess ? "#0f0" : "#f00",
}));
 
const pdfNode = (
  <>
    <Text>Hello</Text>
    <StatusText isSuccess>World!</StatusText>
    <StyledSafeText isSuccess>World!</StyledSafeText>
  </>
);

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
 
import { FC, ReactNode } from "react";
import { styled } from "react-pdfmake-reconciler";
import { StyleReference } from "pdfmake/interfaces";
 
const Text = styled("pdf-text")({
  color: "#f00",
});
 
// Define additional props for styling.
// isSuccess can leak into pdfmake output structure here
const StatusText = styled(Text)<{ isSuccess: boolean }>((props) => ({
  color: props.isSuccess ? "#0f0" : "#f00",
}));
// Set display name for styled components to find them easily in React Dev Tools
StatusText.displayName = "StatusText";
 
// When the underlying component controls what props goes into the vDOM,
// it can prevent styled props from polluting the output.
const SafeText: FC<{ style?: StyleReference; children?: ReactNode }> = ({
  style,
  children,
}) => <pdf-text style={style}>{children}</pdf-text>;
const StyledSafeText = styled(SafeText)<{ isSuccess: boolean }>((props) => ({
  color: props.isSuccess ? "#0f0" : "#f00",
}));
 
const pdfNode = (
  <>
    <Text>Hello</Text>
    <StatusText isSuccess>World!</StatusText>
    <StyledSafeText isSuccess>World!</StyledSafeText>
  </>
);

Theming

Override DefaultTheme from the package to provide your own theme structure and access it in the styled function.

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
 
import { FC, ReactNode } from "react";
import { styled, ThemeProvider } from "react-pdfmake-reconciler";
import { StyleReference } from "pdfmake/interfaces";
 
declare module "react-pdfmake-reconciler" {
  interface DefaultTheme {
    /** My primary color */
    primaryColor: string;
  }
}
 
const Text = styled("pdf-text")((props, theme) => ({
  color: theme.primaryColor,
}));
 
const pdfNode = (
  <ThemeProvider
    value={{
      primaryColor: "#f00",
    }}
  >
    <Text>Hello</Text>
  </ThemeProvider>
);

tsx
/// <reference types="react-pdfmake-reconciler/react-jsx" />
 
import { FC, ReactNode } from "react";
import { styled, ThemeProvider } from "react-pdfmake-reconciler";
import { StyleReference } from "pdfmake/interfaces";
 
declare module "react-pdfmake-reconciler" {
  interface DefaultTheme {
    /** My primary color */
    primaryColor: string;
  }
}
 
const Text = styled("pdf-text")((props, theme) => ({
  color: theme.primaryColor,
}));
 
const pdfNode = (
  <ThemeProvider
    value={{
      primaryColor: "#f00",
    }}
  >
    <Text>Hello</Text>
  </ThemeProvider>
);