Github url


by diegomura

diegomura /react-pdf

📄 Create PDF files using React

7.8K Stars 524 Forks Last release: about 1 year ago (v1.6.0) MIT License 548 Commits 128 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React renderer for creating PDF files on the browser and server

How to install

yarn add @react-pdf/renderer

How it works

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 = () =\> ( <page size="A4" style="{}">
      <view style="{styles.section}">
        <text>Section #1</text>
      <view style="{styles.section}">
        <text>Section #2</text>


Render in DOM

import React from 'react'; import ReactDOM from 'react-dom'; import { PDFViewer } from '@react-pdf/renderer'; const App = () =\> ( <pdfviewer>
  </pdfviewer>); ReactDOM.render(<app></app>, document.getElementById('root'));


Save in a file

import React from 'react'; import ReactPDF from '@react-pdf/renderer'; ReactPDF.render(<mydocument></mydocument>, `${__dirname}/example.pdf`);


For each example, try opening


to see the result.

Text |
Images |
Resume |
Fractals |

Knobs |
Page wrap |

To run the examples, first clone the project and install the dependencies:

sh git clone cd react-pdf yarn install

Then, run

yarn example -- <example-name></example-name>
sh yarn example -- fractals


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

FOSSA Status

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.