React renderer for creating PDF files on the browser and server

How to install

1yarn add @react-pdf/renderer

How it works

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

Web. Render in DOM

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

Node. Save in a file

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

Examples

For each example, try opening output.pdf to see the result.

Text

Resume

Fractals

Knobs

Page wrap

Contributors

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

Sponsors

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

Backers

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

License

MIT © Diego Muracciole

---