Skip to content

๐Ÿ“„ Create PDF files using React (FORK)

License

Notifications You must be signed in to change notification settings

nutshelllabs/react-pdf

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

React renderer for creating PDF files on the browser and server

Lost?

This package is a fork of react-pdf. We're trying to implement some specific performance improvements for multiple renders. Some features were removed and some tests were disabled. I'd recommend you don't use this package.

What's different between this fork and the main repo?

  1. The top level <Document /> component takes a cacheId prop. If this prop is present, re-rendering subsequent documents with the same cacheId will not re-run the resolveAssets() step. This means if you conditionally render components with different fonts or something like that, on subsequent renders those fonts won't get picked up and your document might look weird.
  2. Got rid of emojis. For the type of documents we do, emojis aren't apart of the text we're rendering so removing emoji-detection saved us some time.
  3. Optimized some object copy operations
  4. Target node 16, and no browsers at all. For our use case, we're just running this in a node process. Targeting our platforms version of node, and removing browser support from babel has saved us some time.

How to install

yarn add @nutshelllabs/renderer

How it works

import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@nutshelllabs/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 '@nutshelllabs/renderer';

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

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

Node. Save in a file

import React from 'react';
import ReactPDF from '@nutshelllabs/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

FOSSA Status