Edit

React-pdf
React renderer for creating PDF
v2
files on the browser and server.

Quick start guide

Rendering process

Components

SVG Images
Try it out!
Hooks

Styling

Fonts

Node API

Advanced

Playground / REPL 1. Install React and

Donate
react-pdf

Starting with react-pdf is extremely

simple.

Using Yarn

yarn add @react-pdf/rendere

Using npm

npm install @react-pdf/rend

 Since a renderer simply
implements how elements render
into something, you still need to
have React to make it work (and
react-dom for client-side document
generation). You can find
instructions on how to do that
v2 here.

Quick start guide

2. Create your PDF
Rendering process
document
Components

SVG Images This is where things start getting

Hooks interesting. React-pdf exports a set
Styling of React primitives that enable you
to render things into your
Fonts
document very easily. It also has an
Node API
API for styling them, using CSS
Advanced
properties and Flexbox layout.
Playground / REPL

Donate Let's make the code speak for itself:

import React from 'react';

import { Page, Text, View,

// Create styles

const styles = StyleSheet.c

page: {

flexDirection: 'row',
backgroundColor: '#E4E4
},

section: {

margin: 10,
padding: 10,

flexGrow: 1
}

});

 // Create Document Componen

const MyDocument = () => (

<Document>

<Page size="A4" style={

<View style={styles.s
<Text>Section #1</T
</View>

<View style={styles.s
<Text>Section #2</T
v2
</View>

</Page>

Quick start guide </Document>

Rendering process );

Components

SVG Images
This will produce a PDF document
Hooks
with a single page. Inside, two
Styling different blocks, each of them
Fonts rendering a different text. These
Node API are not the only valid primitives
Advanced you can use. Please refer to the
Components or Examples sections
Playground / REPL
for more information.
Donate

3. Choose where to
render the document

React-pdf enables you to render

the document in three different
environments: web and server. The
process is essentially the same, but
catered to needs of each
environment.

Save in a file
 import ReactPDF from '@reac

ReactPDF.render(<MyDocument

Render to a stream

v2 import ReactPDF from '@reac

ReactPDF.renderToStream(<My
Quick start guide

Rendering process

Components Render in DOM

SVG Images

Hooks import React from 'react';

import ReactDOM from 'react

Styling import { PDFViewer } from '
Fonts
const App = () => (

Node API <PDFViewer>

Advanced <MyDocument />

</PDFViewer>

Playground / REPL );

Donate
ReactDOM.render(<App />, do

4. Have fun!

Maybe the most important step —

make use of all react-pdf
capabilities to create beautiful and
awesome documents!

Rendering process →
v2

Quick start guide

Rendering process

Components

SVG Images

Hooks

Styling

Fonts

Node API

Advanced

Playground / REPL

Donate