# react-pdf-1 **Repository Path**: shanlan/react-pdf-1 ## Basic Information - **Project Name**: react-pdf-1 - **Description**: Create PDF files using React - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-02-29 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

React renderer for creating PDF files on the browser and server

## How to install ```sh yarn add @react-pdf/renderer ``` ## How it works ```jsx 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 ```jsx 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 ```jsx import React from 'react'; import ReactPDF from '@react-pdf/renderer'; ReactPDF.render(, `${__dirname}/example.pdf`); ``` ## Examples For each example, try opening `output.pdf` to see the result.

Text

Images

Resume

Fractals

Knobs

Page wrap
To run the examples, first clone the project and install the dependencies: ```sh git clone https://github.com/diegomura/react-pdf.git cd react-pdf yarn install ``` Then, run `yarn example -- ` ```sh yarn example -- fractals ``` ## Contributors This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md). ## Sponsors Thank you to all our sponsors! [[Become a sponsors](https://opencollective.com/react-pdf#sponsors)] ## Backers Thank you to all our backers! [[Become a backer](https://opencollective.com/react-pdf#backer)] ## License MIT © [Diego Muracciole](http://github.com/diegomura) [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Ftaylorudell%2Freact-pdf.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Ftaylorudell%2Freact-pdf?ref=badge_large) --- ![](https://img.shields.io/npm/dt/@react-pdf/renderer.svg?style=flat)