react-pdf README

The project's README from github.com/diegomura/react-pdf. As one markdown file: README.md.

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

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 = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

Web. Render in DOM

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

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

Node. Save in a file

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

ReactPDF.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

react-pdf (diegomura/react-pdf)

Searching Database…

16.8K ·GitHub
React-pdf
What is this?react-pdf lets you create PDF files using React components, rendering them either in the browser or on the server with Node.
Is this a renderer or a PDF viewer?It is a React renderer that generates PDFs from your components; it is not meant for displaying existing PDFs. For viewing PDFs there's a separate, similarly named package.
How do I add it to a project?Install the package and build your document using the provided React components, then render it either to the DOM in the browser or save it to a file in Node.
Do I need to know JSX and flexbox layout to use it?Yes — documents are built with React/JSX components, and layout is handled with flexbox, which is one of the project's topics.
Does it work the same on the web and on the server?Yes, the same React components can be rendered to the DOM in the browser or saved to a file in a Node.js server environment.
Is this project actively maintained?It has release and CI workflows (main.yml, release.yml, site.yml) and uses a monorepo managed with lerna, suggesting active ongoing development and releases.
How is the codebase organized?It's a monorepo built with lerna/yarn workspaces, with packages for the core renderer and a separate examples workspace used for local development.
What does the license cost me?It's released under the MIT license, so it's free to use, modify, and distribute, including in commercial projects.
Does it support a dev/live-preview mode?The repo includes a dev script that runs an examples workspace, suggesting a live preview setup for building and testing PDF layouts during development.
What are similar projects?pdfkit, ReLaXed, pdfcn, bentopdf, pdfmake, react-pdf, sghtmltopdf, liteparse
Which topics is it in?renderer, flexbox, pdf-generation, document, document-processing, pdf, react, npm, frontend, server, nodejs, library
Creator
diegomura
Size
47.2 MB
Stars
16.8K
Updated
CommitSep 22Release@react-pdf/[email protected]Aug 27
Age
9y
Commits · 90 Days