react-pdf

Files (1)

• SKILL.md

SKILL.md (first lines)

> From [molefrog/skills](https://github.com/molefrog/skills) by molefrog. Copyright (c) 2025, used under the MIT License. See [NOTICE.md](../../../NOTICE.md).

# Generating PDFs with React-PDF

## CRITICAL REQUIREMENTS

1. **Fonts MUST be local files** - Remote font URLs (http/https) do NOT work. Always download fonts
   to local files before using them.
2. **Wrap async code in IIFE** - Top-level await causes errors. Always use `(async () => { ... })()`
   pattern.
3. **Disable hyphenation for custom fonts** - Custom fonts lack hyphenation dictionaries and may
   crash or break words incorrectly. Always call
   `Font.registerHyphenationCallback((word) => [word]);` after registering custom fonts.

## Files

- `references/google-fonts.txt` - Metadata for ~65 popular Google Fonts with TrueType URLs. Each
  line is a font variant in tab-separated format: `font name`, `style`, `category`, `weight`, `url`.
- `references/components.md` - Full component API reference and supported CSS properties
- `assets/example-template.tsx` - Minimal working example demonstrating fixed footers, page numbers,
  and unbreakable content. Read this before starting to understand the basic patterns. Note: not all
  APIs are shown here — always refer to the docs and `references/components.md` for the full API.

## Prerequisites

```bash
npm install react @react-pdf/renderer
npm install -D tsx @types/react
```

`tsx` runs TypeScript + JSX files directly via Node with no config — no `tsconfig.json` needed. It
uses esbuild under the hood and handles JSX transformation automatically.

## Core Components

- **Document**: Root component (metadata, settings)
- **Page**: Individual pages (A4, Letter, or custom dimensions)
- **View**: Container component (similar to div)
- **Text**: Text content, supports nesting for inline styling
- **Image**: Embed images (JPG, PNG, base64)
- **Link**: Clickable hyperlinks (external or internal)
- **Note**: Annotation notes
- **Canvas**: Freeform drawing with pdfkit methods
- **Svg**: Vector graphics (Circle, Rect, Path, Line, Polygon, etc.)
- **StyleSheet**: Create reusable styles

For full component props and CSS properties, see
[references/components.md](references/components.md).

## Basic Example

```tsx
import React from "react";
import { Document, Page, Text, View, StyleSheet, renderToFile } from "@react-pdf/renderer";

const styles = StyleSheet.create({
  page: { flexDirection: "column", backgroundColor: "#ffffff", padding: 40 },
  title: { fontSize: 24, marginBottom: 20, fontWeight: "bold" },
  text: { fontSize: 12, lineHeight: 1.5 },
});

const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={{ margin: 10, padding: 20 }}>
        <Text style={styles.title}>Document Title</Text>
        <Text style={styles.text}>Your content here</Text>
      </View>
    </Page>
  </Document>
);

(async () => {
  await renderToFile(<MyDocument />, "./output.pdf");
  console.log("PDF saved!");
})();
```

## Running Scripts

PDF generation scripts use JSX, which Node cannot run directly. Use `tsx` to execute them:

```bash
npx tsx my-document.tsx
```

`npx tsx` works without installing tsx globally — it downloads on demand. If tsx is installed as a
dev dependency (`npm install -D tsx`), it runs instantly without the npx download step.

Always wrap rendering in async IIFE:

```tsx
// Good
(async () => {
  await renderToFile(<MyDocument />, "./output.pdf");
})();

// Bad - top-level await may fail
await renderToFile(<MyDocument />, "./output.pdf");
```

## Previewing PDFs

To visually inspect generated PDFs, convert pages to images. Try `pdftoppm` first (often
pre-installed), fall back to Python's PyMuPDF if unavailable.

**Option 1: pdftoppm (poppler-utils)** — preferred, no install needed in many environments:

```bash
pdftoppm -png -r 200 document.pdf preview
# → preview-1.png, preview-2.png, ...
```

**Option 2: PyMuPDF (Python)** — fallback if pdftoppm is not available:

```bash
pip install pymupdf
```

```python

From wpgaurav/WordPress-skills, MIT.

More from wpgaurav/WordPress-skills