@react-pdf/renderer NPM | npm.io

3.4.3 • Published 1 day ago

Install

Weekly downloads

94,173

License

MIT

Repository

Last release

1 day ago

How to install

yarn add @react-pdf/renderer

How it works

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 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 ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

Examples

For each example, try opening output.pdf to see the result.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Sponsors

Thank you to all our sponsors! [Become a sponsors]

Backers

Thank you to all our backers! [Become a backer]

License

MIT © Diego Muracciole

npm.io

@babel/runtime @react-pdf/font @react-pdf/layout @react-pdf/pdfkit @react-pdf/primitives @react-pdf/render @react-pdf/types events object-assign prop-types queue scheduler

@pubngo-stack/reservation-api-browser scandinavia abc-institute @upandgo/micro-learning @amosah/resume @infinitebrahmanuniverse/nolb-_react-p gbc-test-2 test-pdf-lib-resumify @everything-registry/sub-chunk-766 @renewvate/ren-dashboard-views @renewvate/views @ascendware/mx @hilma/learning-space @grupo-brik/colpass-components @grupo-brik/propio-components @lincolnteste/components @lapidist/cv-generator @kanda-libs/kanda-quotes @kanda-libs/ks-design-library-public @lettvet/pdf @genstackio/pdf-generator @medely/pdf dop-header-internal @lorren-js/core @groceristar/cards-wrapper @groceristar/pdf-export @mtnpay/sdk the-handsomestnerd-internal ui-test-rowflex zccomponents-react wd-mili-documents list-table-component model-explorer mrsimply-pdf @openeventkit/event-site @openstack_dev/gatsby-theme-marketing-oif-core @pasport/react-common @pasport/react-maps @pedanticlabs/minimal-ui @philippbaschke/cv @plurall-boss/components @prolaera/prolaeracertificatetemplate @tamu-dor/pdf-invoice library-documents-tc-test lcdp-ui-controls lcdp-ui-upates lcdp-ui-updates lam-mvt @wings-dev/components dst-app-ts dst-dashboard-application neoma @windesk/windeskui @ohoareau/pdf-generator @ohoareau/react-document-renderer @quente/quente-ui @rawwee/react-pdf-html @redhat-cloud-services/frontend-components-inventory-vulnerabilities @redhat-cloud-services/frontend-components-pdf-generator @redsift/dashboard @sbody/sb-components @koeroesi86/react-pdf-components @pih/esm-pathology-app @packfinder/views nextwromo-store advanced-modules advanced-modules-mfg @eshoppily/ui-component nova-docs nova-kit @upandgo/micro-learning-generator @upandgo/micro-learning-plateform @trackmatic/yard-ui-common mm-pdf mylibka elabnext_report @superkoders/24i-myaccount-2021-ui @superkoders/wl2021-ui medfro-print-templates mars-antech alta-react-component alta-react-frontend alpha-react-portfolio express-react-pdf payment-kit full-schedule-widget @alkuip/core giai-phau-benh qhc_job_ui grossbooks-print-templates qr-sticker-generator qr-pages qr-pages-test rakamin-component-test paperworker frontend-core-sabroso fs_design_system @amaui/themes pkg-components pkg-components-hnl

1 day ago

29 days ago

1 month ago

1 month ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

6 months ago

7 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago