React renderer for creating PDF files on the browser and server
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.
- The top level
<Document />
component takes acacheId
prop. If this prop is present, re-rendering subsequent documents with the samecacheId
will not re-run theresolveAssets()
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. - 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.
- Optimized some object copy operations
- 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.
yarn add @nutshelllabs/renderer
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>
);
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'));
import React from 'react';
import ReactPDF from '@nutshelllabs/renderer';
ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);
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.
Thank you to all our sponsors! [Become a sponsors]
Thank you to all our backers! [Become a backer]
MIT ยฉ Diego Muracciole