React renderer for creating PDF files on the browser and server
This package is used to create PDFs using React. If you wish to display existing PDFs, you may be looking for react-pdf. Note that this is a (hopefully temporary) fork created to make it work with React 17 (the base package only works with React 16). Also note that it won't work with React 16 or 18 - this was built specifically for v17.
yarn add @andfaulkner/react-pdf-renderer-react17support
import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@andfaulkner/react-pdf-renderer-react17support';
// 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 '@andfaulkner/react-pdf-renderer-react17support';
const App = () => (
<PDFViewer>
<MyDocument />
</PDFViewer>
);
ReactDOM.render(<App />, document.getElementById('root'));
import React from 'react';
import ReactPDF from '@andfaulkner/react-pdf-renderer-react17support';
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