Need help with react-pdf?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

diegomura
9.3K Stars 687 Forks MIT License 647 Commits 155 Opened issues

Description

đź“„ Create PDF files using React

Services available

!
?

Need anything else?

Contributors list

# 6,734
React
JavaScr...
transit...
flexbox
467 commits
# 66,783
reactjs
keynote
CSS
HTML
8 commits
# 53,361
React
React N...
iOS
react-n...
7 commits
# 81,173
React
mjml
email-b...
respons...
6 commits
# 90,728
Ruby
HTML
Angular
dateran...
5 commits
# 72,967
TypeScr...
React N...
Objecti...
React
4 commits
# 107,872
PHP
React
tooltip...
popper
4 commits
# 21,574
React N...
sqlserv...
oracle
Electro...
4 commits
# 2,080
Flask
JavaScr...
nextjs
Node.js
3 commits
# 774
GitHub
rust-la...
wechat-...
query-l...
3 commits
# 109,593
React
flexbox
Ruby
Shell
3 commits
# 164,928
JavaScr...
React
flexbox
Shell
2 commits
# 14,427
uglify
obfusca...
imagema...
Vanilla...
2 commits
# 164,939
JavaScr...
React
flexbox
Shell
2 commits
# 153,632
excel
CSS
C++
meteor
2 commits
# 49,951
TypeScr...
reactjs
normali...
CSS
2 commits
# 52,701
Storybo...
React
React N...
GraphQL
2 commits
# 163,821
Objecti...
TypeScr...
React
flexbox
2 commits
# 164,134
React
flexbox
HTML
CSS
2 commits
# 148,271
CSS
React
HTML
flexbox
2 commits

React renderer for creating PDF files on the browser and server

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

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

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 = () => ( Section #1 Section #2 );

Web.
Render in DOM

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

const App = () => ( );

ReactDOM.render(, document.getElementById('root'));

Node.
Save in a file

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

ReactPDF.render(, ${__dirname}/example.pdf);

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

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.