react-pdf

react-pdf is a powerful library for creating PDF documents using React components. It provides a declarative way to define PDF content, allowing developers to leverage their React knowledge to generate complex PDF layouts and designs programmatically.

Pros

• Seamless integration with React applications
• Highly customizable and flexible for creating various PDF layouts
• Supports both client-side and server-side rendering
• Active development and community support

Cons

• Learning curve for developers new to PDF generation concepts
• Limited support for complex interactive PDF features
• Performance can be slower for large or complex documents
• Some advanced PDF features may require additional libraries or workarounds

Code Examples

Creating a simple PDF document:

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

const styles = StyleSheet.create({
  page: { padding: 30 },
  title: { fontSize: 24, marginBottom: 10 },
  text: { fontSize: 12, marginBottom: 5 },
});

const MyDocument = () => (
  <Document>
    <Page style={styles.page}>
      <Text style={styles.title}>Hello, react-pdf!</Text>
      <Text style={styles.text}>This is a simple PDF document.</Text>
    </Page>
  </Document>
);

Adding images to a PDF:

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

const styles = StyleSheet.create({
  page: { padding: 30 },
  image: { width: 200, height: 200 },
});

const ImageDocument = () => (
  <Document>
    <Page style={styles.page}>
      <Image style={styles.image} src="/path/to/image.jpg" />
    </Page>
  </Document>
);

Creating a table in PDF:

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

const styles = StyleSheet.create({
  table: { display: 'table', width: 'auto', borderStyle: 'solid', borderWidth: 1, borderColor: '#bfbfbf' },
  tableRow: { flexDirection: 'row' },
  tableCell: { width: '25%', borderStyle: 'solid', borderWidth: 1, borderColor: '#bfbfbf', padding: 5 },
});

const TableDocument = () => (
  <Document>
    <Page>
      <View style={styles.table}>
        <View style={styles.tableRow}>
          <View style={styles.tableCell}><Text>Row 1, Cell 1</Text></View>
          <View style={styles.tableCell}><Text>Row 1, Cell 2</Text></View>
        </View>
        <View style={styles.tableRow}>
          <View style={styles.tableCell}><Text>Row 2, Cell 1</Text></View>
          <View style={styles.tableCell}><Text>Row 2, Cell 2</Text></View>
        </View>
      </View>
    </Page>
  </Document>
);

Getting Started

1. Install react-pdf:

   npm install @react-pdf/renderer
   

2. Import necessary components:

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

3. Create a PDF document:

   const MyDocument = () => (
     <Document>
       <Page>
         <Text>Hello, react-pdf!</Text>
       </Page>
     </Document>
   );
   

4. Render the document:

   import { PDFViewer } from '@react-pdf/renderer';
   
   const App = () => (
     <PDFViewer>
       <MyDocument />
     </PDFViewer>
   );