React renderer for creating PDF files on the browser and server

New react-pdf 2.0 was released. Read about the announcement

React-pdf is a package that allows you to create and render PDF documents through the use of React Components. Pages that can be rendered as a downloadable document. A wide variety of use cases can be supported with this project; enabling dynamic web pages to be saved statically in a widely accepted document format. Simply add the tool as a dependency in your React project and display away!

yarn add @react-pdf/renderer

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>
);

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

Render Abstract Images with Components

Sample Link PDF Path

Create Your Professional Resume

Sample Link PDF Path

Create Static Documents

Sample Link PDF Path

(Done via your OS terminal)
1. Clone this repository with your terminal: git clone https://github.com/diegomura/react-pdf
2. Navigate to sub-directory "/react-pdf/templates/"
3. Navigate to folder: Fractal, Resume or Document.
4. In the folder of the template to view, enter command in the terminal: npm install --legacy-peer-deps
5. After all dependencies are installed, type in terminal to run: npm start
6. Sample pages will be viewable through the browser @ http:https://localhost:3000/

This project exists thanks to all the people who contribute. [Contribute].

Thank you to all our sponsors! [Become a sponsors]

Thank you to all our backers! [Become a backer]

MIT © Diego Muracciole