React renderer for creating PDF files on the browser and server

Lost?

This package is used to create PDFs using React. If you wish to display existing PDFs, you may be looking for react-pdf.

How to install

1yarn add @react-pdf/renderer

How it works

1import React from 'react';
2import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
3
4// Create styles
5const styles = StyleSheet.create({
6  page: {
7    flexDirection: 'row',
8    backgroundColor: '#E4E4E4',
9  },
10  section: {
11    margin: 10,
12    padding: 10,
13    flexGrow: 1,
14  },
15});
16
17// Create Document Component
18const MyDocument = () => (
19  <Document>
20    <Page size="A4" style={styles.page}>
21      <View style={styles.section}>
22        <Text>Section #1</Text>
23      </View>
24      <View style={styles.section}>
25        <Text>Section #2</Text>
26      </View>
27    </Page>
28  </Document>
29);

Web. Render in DOM

1import React from 'react';
2import ReactDOM from 'react-dom';
3import { PDFViewer } from '@react-pdf/renderer';
4
5const App = () => (
6  <PDFViewer>
7    <MyDocument />
8  </PDFViewer>
9);
10
11ReactDOM.render(<App />, document.getElementById('root'));

Node. Save in a file

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

Contributors

This project exists thanks to all the people who contribute. Looking to contribute? Please check our [contribute] document for more details about how to setup a development environment and submitting code.

Sponsors

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

Backers

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

License

MIT © Diego Muracciole

---