skills.rest
ignacioedlp
ignacioedlpCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-pdf

Generate PDF documents from React components using @react-pdf/renderer.

Updated Feb 15, 2026
Search Tags:#typescript#react#pdf generation#jsx#document creation#@react-pdf/renderer
One-click install
npx skills add https://github.com/ignacioedlp/speed-pdf --skill react-pdf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-pdf
Source: https://github.com/ignacioedlp/speed-pdf/tree/main/.agents/skills/react-pdf
Command: npx skills add https://github.com/ignacioedlp/speed-pdf --skill react-pdf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, @react-pdf/renderer, tsx, @types/react, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of PDF documents directly from React components, enabling dynamic and programmatic document generation.

Core Features & Use Cases

  • Dynamic PDF Generation: Create PDFs with custom layouts, styles, and content using React components.
  • Complex Document Structures: Supports features like page numbers, headers, footers, tables, images, and SVG graphics.
  • Use Case: Generate personalized invoices, reports, or certificates by passing dynamic data to a React template that is then rendered into a PDF.

Quick Start

Use the react-pdf skill to generate a PDF document from the provided React component code.

Frequently Asked Questions about react-pdf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate PDF documents using React components?▼

To generate PDF documents using React components, use @react-pdf/renderer to define JSX templates with dynamic content. Pass data to structured document layouts to programmatically render reports, invoices, and forms.

Can I create complex PDF layouts with headers, footers, and tables in React?▼

Yes, creating complex PDF layouts with headers, footers, and tables in React is supported. The @react-pdf/renderer library renders structured documents featuring page numbers, images, and SVG graphics.

Do I need to register fonts locally for React PDF generation?▼

You need to register fonts locally for React PDF generation to ensure reliable output. Adhering to specific rendering patterns and local font registration guarantees correct typography in generated documents.

What is the best way to build dynamic invoices and reports in a TypeScript React application?▼

The best way to build dynamic invoices and reports in a TypeScript React application is using @react-pdf/renderer. It renders dynamic data into custom styled templates programmatically without manual layout calculations.

Does @react-pdf/renderer support SVG graphics and images?▼

@react-pdf/renderer supports rendering SVG graphics and images within generated documents. You can embed visual content alongside structured text layouts for comprehensive document creation.

Why does my React PDF generation output fail to render custom fonts correctly?▼

React PDF generation fails to render custom fonts correctly when local font registration is skipped. Reliable output requires explicit local font registration and adherence to specific rendering patterns.

Related Skills

Explore More Software Engineering Skills→
cpfcoachingcpfcoaching

react-pdf

Generate PDF documents using React-PDF with TypeScript and JSX.

Community
Intermediate
flowkraftflowkraft
75

datapallas-report-distribution

Distribute generated DataPallas burst documents via SMTP email or cURL uploads to remote storage endpoints.

Community
Intermediate
cyanluna-gitcyanluna-git

vercel-best-practice

Apply Vercel React/Next.js performance guidelines to optimize rendering, bundles, and API calls.

Community
Advanced
codexyzdevcodexyzdev

react-pdf-v4

Generate and render PDF documents from React components using @react-pdf/renderer.

Community
Intermediate