react-pdf

The Vite examples package contains a catalog of implementations demonstrating various react-pdf capabilities. Key features demonstrated include:

• Typography & Text: Ellipsis truncation, Emoji (Twemoji) rendering, Font family fallbacks, Font weights, Multiline text styling, Soft hyphens, and complex World Scripts (Bengali, Tamil, Thai, Arabic, etc.).
• Layout & Responsiveness: Media queries for responsive layouts, Page wrapping with headers/page numbers, and minPresenceAhead for controlling page breaks.
• Images & Graphics: Image deduplication, JPEG EXIF orientation handling, Object Fit modes (contain, cover, none), Responsive images via srcSet, and SVG support (paths, gradients, patterns, and transforms).
• Advanced Components: Interactive Forms (inputs, checkboxes, selects), Internal document navigation (Go To/anchors), Math (LaTeX) via @react-pdf/math, and ImageBackground with overlaid content.

The @react-pdf/stylesheet engine transforms CSS-like style objects into normalized, resolved values suitable for PDF layout and rendering. It handles unit conversions (e.g., in, mm, vh), color parsing, shorthand expansion (e.g., margin, border), media queries, and style flattening.

To use it, you provide a container object (defining dimensions and orientation) and a style object (or array of objects). The engine returns a computed object where all values are resolved.

import stylesheet from '@react-pdf/stylesheet';

const container = {
  width: 400,
  height: 600,
  orientation: 'portrait',
};

const style = {
  margin: 20,
  width: '50vw',
  height: '20vh',
  borderRadius: 5,
  fontWeight: 'semibold',
  borderBottom: '2 solid yellow',
  '@media max-width: 500': {
    backgroundColor: 'rgb(255, 0, 0)',
  },
};

const computed = stylesheet(container, style);

// Result includes expanded properties like marginTop, borderBottomWidth, etc.

To create a PDF, you define a component tree using specialized primitives: <Document>, <Page>, <View>, and <Text>. Styling is handled via StyleSheet.create, which follows a subset of CSS flexbox properties.

Note: This package is for creating PDFs. If you need to display existing PDF files, use react-pdf instead.

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

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

A node represents a single element in a document. The root node must always be of type DOCUMENT, which contains PAGE nodes in its children array.

Nodes are defined by the following properties:

node.type (Mandatory)

Specifies the type of the node. Types should be imported from @react-pdf/primitives.

node.box

Defines the bounding box for the node. Supported keys include:

• left, top, width, height
• paddingTop, paddingLeft, paddingBottom, paddingRight
• marginTop, marginLeft, marginBottom, marginRight
• borderTopWidth, borderLeftWidth, borderBottomWidth, borderRightWidth

node.style

Defines the visual appearance. Common supported properties include:

• color, opacity, overflow, backgroundColor
• borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius
• borderTopColor, borderLeftColor, borderBottomColor, borderRightColor

node.props

Specific parameters required for certain nodes to behave correctly (e.g., SVG nodes).

The @react-pdf/render library provides a render function that transforms a document tree (a nested structure of nodes) into a target context.

Arguments:

• ctx: The target context where the document is rendered. While currently targeting pdfkit document structures, it can target any structure that matches the pdfkit API. This allows for future multi-format rendering.
• node: The document root node, which is a nested structure defining elements via type and associated properties.

Important Note on Layout: This package does not handle node positioning, inheritance, style transformations, or layout logic. Its sole responsibility is to render the nodes exactly as provided into the context. When defining styles, use explicit properties like paddingTop instead of shorthand properties like padding.

import render from '@react-pdf/render';
import primitives from '@react-pdf/primitives';

const view = {
  type: primitives.View,
  style: {
    backgroundColor: 'red',
    borderTopLeftRadius: 5,
  },
  box: {
    left: 20,
    top: 20,
    width: 100,
    height: 80,
  },
};

const doc = {
  type: primitives.Document,
  children: [
    {
      type: primitives.Page,
      box: { width: 400, height: 600 },
      children: [view],
    },
  ],
};

const ctx = createContext();
render.default(ctx, doc);