Generate PDF documents using React-PDF with TypeScript and JSX.
npx skills add https://github.com/cpfcoaching/glowing-palm-tree --skill react-pdf-cpfcoaching
Please help me install this Agent Skill. Skill: react-pdf Source: https://github.com/cpfcoaching/glowing-palm-tree/tree/main/.skills_backup/react-pdf Command: npx skills add https://github.com/cpfcoaching/glowing-palm-tree --skill react-pdf-cpfcoaching
This Skill streamlines the creation of PDF documents from React applications, offering a robust solution for generating reports, invoices, forms, resumes, and more with ease.
Create a new PDF document with the following JSX:
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!');
})();
High-intent search queries and answers about installing and using this skill.
To generate PDF documents from a React application, you can use the @react-pdf/renderer library with TypeScript and JSX to define layouts and render them directly to PDF files. It handles complex layouts, custom fonts, and SVG graphics for professional output.
The best way to create custom invoices and reports in React is using @react-pdf/renderer, which supports JSX-based components, flexbox layouts, and custom fonts to produce visually appealing PDF documents for professional purposes.
Yes, you can use flexbox and custom fonts for PDF generation in React. The @react-pdf/renderer library supports complex layouts including flexbox styling, SVG graphics, and custom fonts to ensure professional typesetting in your documents.
Yes, PDF generation with @react-pdf/renderer requires React as a dependency. You also need tsx and @types/react to execute the TypeScript-based JSX rendering process and generate your final PDF output file.
React PDF generation of complex document layouts requires proper JSX structuring using Document and Page components from @react-pdf/renderer. You must define StyleSheet objects correctly and ensure React is installed to execute the renderToFile function successfully.
molefrogGenerate PDF documents from React components using @react-pdf/renderer.
khglynnConvert multiple Markdown files into a single print-friendly HTML document.
praveenpereraConverts JSX/React components into SVG diagrams and OG images.
soofi-xyzGenerate PDFs from HTML templates using Playwright and Chromium on AWS Lambda.