๐Ÿ“„ Create PDF files using React

Overview

React renderer for creating PDF files on the browser and server

Lost?

This package is used to create PDFs using React. If you wish to display existing PDFs, you may be looking for react-pdf.

How to install

yarn add @react-pdf/renderer

How it works

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 = () => (
  <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 '@react-pdf/renderer';

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

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

Node. Save in a file

import React from 'react';
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__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:

git clone https://github.com/diegomura/react-pdf.git
cd react-pdf
yarn install

Then, run yarn example -- <example-name>

yarn example -- fractals

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

FOSSA Status


Comments
  • React-pdf v2.0

    React-pdf v2.0

    Ongoing effort for a new react-pdf 2.0 version

    codecov

    Goals behind this idea

    1. Improve performance: I believe react-pdf can be much much faster. There are some bottlenecks we can't avoid, such as assets fetching, but there are some other fields in which there's a lot of room for improvements. I already rewrote textkit to be much faster and reliable, and has proven to be so. Fixes #544
    2. Embrace immutability: One of the main cause of issues right now is dealing with the mutable nature of react-reconciler while having an asynchronous rendering process, creating race conditions. Having an immutable process will solve many of these conflicts. Fixes #310, Fixes #420
    3. Make it functional::It's not that I don't like classes, but I believe that functional programming paradigms can help a lot on breaking the whole rendering process in smaller and testable bits (see below). We are already using ramda on textkit, so this will come basically for free. This will have a positive impact on test coverage and bundle size
    4. Improve page wrapping: The current solution works decently (even though it has some issues), but it's quite expensive time-wise. I believe we can improve this by dealing with simpler objects and re-calculating yoga nodes fewer times. Fixes #476, Fixes #584
    5. Dynamic imports: react-pdf uses many heavy dependencies throughout the process. Would be cool for react-pdf to import only the ones needed based on the components you use.

    New layout/rendering process

    To know about the current process please go here (simplified version). In detail, the new version will do:

    • [x] Internal structure creation (by the reconciler)
    • [x] Resolve page sizes
    • [x] Tree linting
      • [x] Link/text replacement
      • [x] Notes should only have text instances inside
      • [x] Remove page margins
      • [x] Page padding percentage translation
      • [x] Page immediate childs height percent translation
    • [x] Flatten styles (many might be provided)
    • [x] Expand styles (border to borderTopStyle, borderTopWidth, ...)
    • [x] Transform style values (borderTopStyle: 1 solid red to borderTopStyle: solid)
    • [x] Resolve units ("1in" to 72)
    • [x] Inherit styles
    • [x] Fetch assets
    • [x] Resolve node layout (Yoga to the rescue)
    • [x] Text layout
    • [x] Pagination (might be necessary to loop to previous step)
    • [x] Break text (w/ orphans & widows protection)
    • [x] Dynamic nodes
    • [x] Fixed nodes
    • [x] SVG Support
    • [x] Resolve node origin
    • [x] Translate relative coordinates to absolute ones
    • [x] PDF instance creation
    • [x] Add PDF metadata
    • [x] Render PDF
      • [x] Render Page
      • [x] Apply transformations
      • [x] Render Background
      • [x] Render Borders
      • [x] Render View
      • [x] Render Text
      • [x] Render Link
      • [x] Render Note
      • [x] Render Canvas
      • [x] Render Image

    This might change based on unknown blockers

    SVG progress

    • [x] Basic nodes
    • [x] Translate image to yoga position
    • [x] Aspect ratio support
    • [x] Transformations
    • [x] Basic fill and stroke styles
    • [x] Viewport support
    • [x] Inherit styles
    • [x] Text support
    • [x] Clip paths
    • [x] Gradients

    Todo

    • [x] Percent border radius
    • [x] z-index support
    • [x] Resolve (image) object fit
    • [x] Ruler support
    • [x] wrap support
    • [x] minPresenceAhead support
    • [x] Parse rgb, rgba and cmyk colors
    • [x] Deprecate old font API
    • [x] Image src async fn
    • [x] Style text links
    • [x] Opacity
    • [x] Emoji rendering
    • [x] Study performance bottle necks
    • [x] setPointScaleFactor support (Fixes #548)
    • [x] Add ref links support

    Finished new features

    • Percent border radius
    • Z-index support

    Other cool ideas in mind

    1. Better dynamic rendering: Not as easy as it seems, but providing the page number and layout data (width, height, x, y, etc) on nodes would make this tool way more powerful
    2. calc support: This is also not as simple as it seems, since yoga does not support this task. Having this feature built in on top of react-pdf would mean to layout things 2 or more times, but it might be possible. Refers #610
    3. Image rendering: if you look at the process, PDF does not come into play until the very last part of the layout process. In this point we will now be able to grab the same input but throw it into another target, such as PNG or JPEG images.
    4. z-index support: This shouldn't be that much of a deal with this approach. We can sort the nodes after layout calculation and before rendering
    5. CSS filters: Since now we can plug any intermediate step more easily, implementing CSS filters (such as brightness or constrast) shouldn't be that hard. Images would be the most daunting piece to solve but it's totally doable (maybe use colors?)
    6. Enhanced REPL: For the REPL, we could go up to the "Page wrapping" step and implement a DOM rendering engine instead of a PDF one. By doing this we could have a much faster and extensible REPL without using pdfjs at all.

    Fixes #29 Fixes #339 Fixes #476 Fixes #1121 Fixes #718 Fixes #1063 Fixes #836 Fixes #1133 Fixes #1104 Fixes #1050 Fixes #1041 Fixes #1016 Fixes #1008 Fixes #1000 Fixes #973 Fixes #917 Fixes #898 Fixed #850 Fixes #476 Fixes #470 Fixes #517 Fixes #669 Fixes #1125 Fixes #1093

    opened by diegomura 111
  • Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').

    Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').

    After the upgradation, we are getting the below error in local and while deploying the code. Please help here.

    image

    Current version in our machine : @react-pdf/renderer": "^2.0.16"

    @diegomura Please help check ASAP.

    opened by rajan-gupta-12 62
  • Uncaught Error: stream.push() after EOF

    Uncaught Error: stream.push() after EOF

    OS: Chrome Version 70.0.3538.110 (official Build) (64 bit)

    React-pdf version: 1.0.0 "@react-pdf/renderer": "^1.0.0", "@react-pdf/styled-components": "^1.2.0",

    Description: With the last update made 7 days ago the console show this error, before the update the pdf works correctly.

    _stream_readable.js:271 Uncaught Error: stream.push() after EOF at readableAddChunk (_stream_readable.js:271) at PDFDocument../node_modules/readable-stream/lib/_stream_readable.js.Readable.push (_stream_readable.js:245) at PDFDocument._write (pdfkit.browser.es.js:3731) at PDFReference.finalize (pdfkit.browser.es.js:255) at PDFReference.end (pdfkit.browser.es.js:247) at PNGImage.finalize (pdfkit.browser.es.js:3162) at pdfkit.browser.es.js:3202 at Deflate.onEnd (index.js:225) at Deflate../node_modules/events/events.js.EventEmitter.emit (events.js:96) at endReadableNT (_stream_readable.js:1010) at afterTickTwo (index.js:27) at Item../node_modules/process/browser.js.Item.run (browser.js:153) at drainQueue (browser.js:123)

    bug 
    opened by manolobattistadev 62
  • Generate PDF on the fly

    Generate PDF on the fly

    Thanks for a great library I was playing around with something similar recently.

    This is what I am trying to solve currently and wondering if it is/will be possible with react-pdf: I need to be able to generate loads of different PDFs in our platform and would love to do that fully on the frontend. The user clicks download button which allows him to download a generated PDF by something like react-pdf?

    new feature 
    opened by knowbody 62
  • feat: compatibility with modern web bundlers and browsers

    feat: compatibility with modern web bundlers and browsers

    As discussed in #1317, react-pdf currently cannot be used out of the box with modern ES bundlers such as Vite or Rollup (which react-pdf even uses itself for building the various packages). The reason was that react-pdf contains code which references node.js builtin modules such as Buffer, stream, zlib etc., which are not natively available in browsers.

    This PR creates new browser-specific builds for all the @react-pdf packages that need it. This way, I was able to leave the node.js-specific builds almost untouched. After this PR, react-pdf can be used in an app without having to add any bundler config (such as described here for Webpack 4 and 5) or bundler shims (such as this one for Vite). You can simply install @react-pdf/renderer and start using it right away, the way it should be.

    Fixes #1317, fixes #1645, fixes #1899, fixes #1847, fixes #1886, fixes #1744, fixes #1670, fixes #1669, fixes #1915, fixes #1786, fixes #1944, fixes #1966

    Screenshot from 2022-06-17 09-46-22

    To acheive this, I had to bundle some commonjs dependencies with the browser versions of react-pdf:

    • blob-stream
    • restructure
    • dfa (was already bundled before)
    • vite-compatible-readable-stream
    • browserify-zlib

    This was necessary because these packages are in commonjs format (instead of ES6 module format) and will be misinterpreted when using a modern ES6 module bundler.

    (Fun fact, I actually did the whole thing twice, but the first time around I learned so much about rollup that I decided it was worth doing a second time because the resulting rollup configs would be much cleaner :laughing:)

    While I was at it, I also updated the restructure package to the latest version, which has been requested in #1451 for a long time now.

    TODO:

    • [x] Test in Vite (done by @carlobeltrame)
    • [ ] Someone else test in Vite, development (@thekevinbrown)
    • [ ] Someone else test in Vite, production build (@thekevinbrown)
    • [ ] Test on Node.js (@thekevinbrown)
    • [ ] Test in Webpack 4 (@diegomura or @jeetiss ?)
    • [ ] Test in Webpack 5 (@jeetiss ?)
    • [ ] If it works without additional config in Webpack 4 / 5, remove the corresponding documentation
    • [ ] Optional: Test in a web worker (@carlobeltrame) - having some trouble with React 18 features currently
    opened by carlobeltrame 61
  • Issue with flexbox under page with wrap

    Issue with flexbox under page with wrap

    Hi React PDF,

    I am noticing some issues with flexbox after applying the wrap flag to the parent page. For example, I cannot get a component to wrap in a flex row. What happens visually is the second nested component (in this case the red box) simply disappears. The component below is a simple example:

    const styles = StyleSheet.create({
      main: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: 'green',
      },
      blue: {
        width: 200,
        height: 200,
        backgroundColor: 'blue',
      },
      red: {
        width: 200,
        height: 200,
        backgroundColor: 'red',
      },
    });
    
    const Info: React.StatelessComponent = () => {
      return (
        <View>
          <View style={styles.main}>
            <View style={styles.blue} />
            <View style={styles.red} />
          </View>
        </View>
      );
    };
    

    And I try to render it like so:

      return (
        <Document title={copy.documentTitle}>
          <Page size="A4" style={styles.page} wrap>
            <View style={styles.container}>
              <Info  />
            </View>
          </Page>
        </Document>
      );
    

    Please let me know how to fix this? Thanks!

    Sincerely, Laura

    opened by flaurida 40
  • React-pdf landing page

    React-pdf landing page

    We will need a landing page to promote the library.

    I imagined it can have something like a repl, similar how babel does, where you can type code and see the rendered document on the right. Maybe react-playground can be used for that.

    Design ideas and contributions will come very handy.

    new feature 
    opened by diegomura 40
  • Issue rendering images via <Image> component

    Issue rendering images via component

    I have been unable to correctly load images via the component in React PDF.

    I had issue locally in my code but have also been able to replicate the same issue on the image test page https://react-pdf.org/repl?example=images

    This works and renders (test image) https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg

    This will not render (test image) https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x.png

    Is there something that the component needs to support this?

    The images I wish to load for my project will be PNG but these look to be supported.

    Any help would be greatly appreciated

    bug 
    opened by grantburnham 34
  • Memory Leak

    Memory Leak

    Before I get into the issue, I just wanted to thank @diegomura and others for your work and responsiveness on this wonderful library! Your efforts are greatly appreciated.

    OS:

    • Amazon Linux aws-elasticbeanstalk-amzn-2018.03.0.x86_64-nodejs-hvm-201809210902 (ami-00d787dad6adc69a1) on AWS Elastic Beanstalk
    • Also, macOS 10.13.6

    React-pdf version: 1.0.0-alpha.24, 1.0.0-alpha.25 Node v8.9.3

    Description: We are consistently observing a memory leak, with the memory footprint of our node process growing linearly with each generated PDF until eventually exhausting the resources on our servers.

    My team saw https://github.com/diegomura/react-pdf/issues/165 (now closed), but we are uncertain as to whether what we are experiencing is related or not. As noted above, we have tried using both alpha.24 and alpha.25 with the same results.

    We first noticed the memory leak on servers running in AWS via ElasticBeanstalk (Amazon Linux) but have since been able to recreate it on our local development environments running macOS 10.13.6. We attempted isolating the source of the leak ourselves but have not yet come up with anything conclusive. We're not even sure if the memory leak is (as before) related to a dependency vs the react-pdf code itself, but we are hoping you might be able to identify something more readily.

    How to replicate issue: We created a small project with limited dependencies that should allow you to recreate the issue as we see it. Zip attached here: pdfGenerator.zip

    There are instructions in server.js, repeated below:

    RUN $ yarn / npm install and then run: $ npm run start-with-chrome-inspect

    1. In a Chrome browser window, go to http://localhost:3000/.
    2. In a new tab go to: chrome://inspect/#devices and click inspect under the target. In the devtools window, select the Memory tab at the top. Select 'Heap snapshot'. Click 'Take snapshot'.
    3. Open http://localhost:3000/pdf in a new tab.
    4. Go back the devtools window and click the dark circle icon at top-left above the Profiles pane to generate another snap.
    5. Repeat steps 4 and 5 repeatedly and you can see the retained memory increase. (JSArrayBufferData especially)

    An alternate path to viewing the memory leak at a higher level is to monitor via pm2: $ yarn / npm install pm2 $ pm2 start server.js $ pm2 monit -- proceed to access http://localhost:3000/pdf repeatedly -- and watch the memory footprint grow.

    Note that the memory footprint grows in proportion to the size of the PDF generated, so if you want to see it grow/leak more readily, you can create a larger PDF with more content, images, etc.

    Thank you in advance for your help!

    bug 
    opened by coreyweidenhammer 34
  • Cannot read property 'dereference' of undefined

    Cannot read property 'dereference' of undefined

    I'm just trying a simple example to download a PDF with a PDFDownloadLink and its throwing the above error when the component renders.

    const ReportPDF = () => (
            <Document>
                <Page size="A4">
                    <View>
                        <Text>Section #1</Text>
                    </View>
                    <View>
                        <Text>Section #2</Text>
                    </View>
                </Page>
            </Document>
        );
    ...
    render  (
    <div>
                                        <PDFDownloadLink document={<ReportPDF/>} fileName="somename.pdf">
                                            {({loading}) => loading ? <Button>Loading</Button> : <Button>PDF</Button>}
                                        </PDFDownloadLink>
                                    </div>
    )
    
    bug incomplete 
    opened by jrichmond4 33
  • ESM contains server code, doesn't provide named exports

    ESM contains server code, doesn't provide named exports

    Describe the bug When using Vite to package a React app, we hit some issues because:

    1. The ESM that @react-pdf/renderer provides doesn't seem to provide the same exports as the CJS module.
    2. There is server code included in the ESM, but this library is a browser module.

    To Reproduce You can reproduce with this repository: https://github.com/thekevinbrown/vite-react-pdf-reproduction

    Expected behavior I expected React PDF to be able to be bundled and used in an ESM context.

    Screenshots

    Uncaught ReferenceError: global is not defined
        at node_modules/blob/index.js (@react-pdf_renderer.js:554)
        at __require (chunk-KVFJW2XH.js:12)
        at node_modules/blob-stream/index.js (@react-pdf_renderer.js:616)
        at __require (chunk-KVFJW2XH.js:12)
        at @react-pdf_renderer.js:126368
    

    Desktop (please complete the following information):

    • OS: MacOS
    • Browser: Chrome
    • React-pdf version: "@react-pdf/renderer": "^2.0.12",

    Additional Notes

    An issue was logged with Vite here: https://github.com/vitejs/vite/issues/3405

    This may be related to this issue as well: #1029

    I'd be happy to help with a PR if one is welcome, just wanted to check to ensure I wasn't duplicating effort and that this was something you'd accept a PR for.

    bug 
    opened by thekevinbrown 32
  • Just delete this stpuid package

    Just delete this stpuid package

    Compiled with problems:X

    ERROR in ./node_modules/@react-18-pdf/layout/lib/index.es.js 20:0-38

    Module not found: Error: Can't resolve '@react-18-pdf/yoga' in 'C:\Users\Elias\Desktop\myApp\[email protected]\layout\lib'

    ERROR in ./node_modules/@react-18-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28

    Module not found: Error: Can't resolve 'stream' in 'C:\Users\Elias\Desktop\myApp\[email protected]\pdfkit\lib'

    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

    If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

    ERROR in ./node_modules/@react-18-pdf/pdfkit/lib/pdfkit.browser.es.js 4:0-24

    Module not found: Error: Can't resolve 'zlib' in 'C:\Users\Elias\Desktop\myApp\[email protected]\pdfkit\lib'

    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

    If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false }

    ERROR in ./node_modules/@react-18-pdf/png-js/lib/png-js.browser.es.js 1:0-24

    Module not found: Error: Can't resolve 'zlib' in 'C:\Users\Elias\Desktop\myApp\[email protected]\png-js\lib'

    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

    If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }' - install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false }

    ERROR in ./node_modules/blob-stream/index.js 1:21-47

    Module not found: Error: Can't resolve 'stream' in 'C:\Users\Elias\Desktop\myApp\node_modules\blob-stream'

    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

    If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

    ERROR in ./node_modules/blob-stream/index.js 2:11-26

    Module not found: Error: Can't resolve 'util' in 'C:\Users\Elias\Desktop\myApp\node_modules\blob-stream'

    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

    If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }' - install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false }

    ERROR in ./node_modules/restructure/src/EncodeStream.js 20:11-28

    Module not found: Error: Can't resolve 'stream' in 'C:\Users\Elias\Desktop\myApp\node_modules\restructure\src'

    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

    If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false }

    ERROR in ./node_modules/restructure/src/LazyArray.js 25:12-35

    Module not found: Error: Can't resolve 'util' in 'C:\Users\Elias\Desktop\myApp\node_modules\restructure\src'

    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

    If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }' - install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false }

    ERROR in ./node_modules/safe-buffer/index.js 3:13-30

    Module not found: Error: Can't resolve 'buffer' in 'C:\Users\Elias\Desktop\myApp\node_modules\safe-buffer'

    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

    If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }' - install 'buffer' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "buffer": false }

    ERROR in ./node_modules/safer-buffer/safer.js 5:13-30

    Module not found: Error: Can't resolve 'buffer' in 'C:\Users\Elias\Desktop\myApp\node_modules\safer-buffer'

    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

    If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }' - install 'buffer' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "buffer": false }

    opened by eliaskh 2
  • chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Repeated Headers on Tables

    Repeated Headers on Tables

    opened by nrgapple 0
  • make proper wrapping

    make proper wrapping

    Describe the bug A clear and concise description of what the bug is. When i set props to wrap true i have problem: for example whole component goes down for next page but in current page there is enough place for say 60% of component ? how can i figure that ? To Reproduce Steps to reproduce the behavior including code snippet (if applies):

    1. Go to '...'
    2. Click on '....'
    3. Scroll down to '....'
    4. See error

    You can make use of react-pdf REPL to share the snippet

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: [e.g. MacOS, Windows]
    • Browser [e.g. chrome, safari]
    • React-pdf version [e.g. v1.1.0]
    opened by Nuruddin999 0
  • Image dont appear when i render it to string

    Image dont appear when i render it to string

    Describe the bug When a render a pdf with image on my api using renderToString and send this string to my react and download this pdf. The image dont appear in the pdf. But when i render this pdf using the method renderToFile and save on server side the ima is showing.

    To Reproduce Steps to reproduce the behavior including code snippet (if applies):

    1. Create a pdf with image
    2. render this pdf to string and send to a front end encoded a base64
    3. decode this pdf and download it
    4. See error

    Expected behavior I expect the image appear when i download it on front end

    Desktop (please complete the following information):

    • OS: [Ubuntu(ZorinOS)]
    • Browser [chrome, nodev16(nestjs)]
    • React-pdf version [e.g. v^3.0.1]
    opened by cris-ms 2
Releases(@react-pdf/[email protected])
Owner
Diego Muracciole
Taking my time to perfect the bit
Diego Muracciole
Render HTML in react-pdf

react-pdf-html <Html> component for react-pdf Support for CSS via <style> tags and style attributes (limited to Style properties supported by react-pd

Dan Blaisdell 54 Dec 5, 2022
Declaratively render a tree of files with JSX

React FS Renderer Tired of using an imperitive API to manipulate a tree of output? React gives us a great declarative interface for browser DOMs and n

Eric Vicenti 106 Nov 21, 2022
Create amazing 360 and VR content using React

React 360 React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and W

Facebook Archive 8.7k Dec 3, 2022
React bindings to create and control a 3D scene using three.js

react-three-legacy Create/control a three.js canvas using React. To use React for drawing 2D using WebGL, try react-pixi. This react-three is deprecat

Gary Haussmann 1.5k Nov 25, 2022
Create amazing 360 and VR content using React

React 360 React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and W

Facebook Archive 8.7k Nov 28, 2022
Create elegant HTML email templates using React.

react-html-email โš ๏ธ Currently Unmaintained react-html-email is presently unmaintained. As React has matured, it is no longer as necessary to use a sep

Max Goodhart 887 Dec 4, 2022
๐ŸŽฅ Create videos programmatically in React

Join the Discord Remotion is a suite of libraries building a fundament for creating videos programmatically using React. Why create videos in React? L

Jonny Burger 14.4k Dec 7, 2022
๐Ÿ“„ Create word documents with React

redocx Create word documents with React Introduction redocx is a library which lets you create word documents with React. It provides a set of compone

Nitin Tulswani 1.4k Nov 21, 2022
๐Ÿ™ A minimal implementation of react-dom using react-reconciler

react-tiny-dom react-tiny-dom is a minimal implementation of react-dom as custom renderer using React 16 official Renderer API. The purpose of this pr

Jiayi Hu 451 Nov 21, 2022
Write PixiJS applications using React declarative style.

ReactPixiFiber โ€“ React Fiber renderer for PixiJS ReactPixiFiber is a JavaScript library for writing PixiJS applications using React declarative style

Michaล‚ Ochman 794 Dec 2, 2022
Experiments to see the advantages of using Web Workers to Render React Virtual DOM

React Renderer using Web Workers A React Custom renderer using Web Workers. All the Virtual DOM reconcilliations happen in a WebWorker thread. Only no

Web Performance 917 Dec 2, 2022
๐Ÿฆโ€ข [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Raphael Amorim 1.5k Dec 1, 2022
A simple react task to render uses contacts list using fake mockAPI

CONTACT LIST A simple react task to render uses contacts list using fake mockAPI. Contact list Light Page Contact list Dark Page Search by name Loadin

null 2 May 17, 2022
React JSX Renderer is a React Component for rendering JSX to React nodes.

React JSX Renderer A React Component for Rendering JSX. Description React JSX Renderer is a React Component for rendering JSX to React nodes.

Sho Kusano 43 Nov 28, 2022
๐Ÿ‡จ๐Ÿ‡ญ A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

Poimandres 20.6k Dec 7, 2022
๐Ÿ‡จ๐Ÿ‡ญ A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

Poimandres 20.6k Dec 4, 2022
[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications

React-TV ยท react-tv: React Renderer for low memory applications. react-tv-cli: React Packager for TVs. Currently under development. import React from

Raphael Amorim 2k Nov 29, 2022
Osd-react-renderer - A custom React renderer for OpenSeadragon

osd-react-renderer A custom React renderer for OpenSeadragon viewer, built using

Lunit Inc. 3 Jan 24, 2022
๐ŸŒˆ React for interactive command-line apps

React for CLIs. Build and test your CLI output using components. Ink provides the same component-based UI building experience that React offers in the

Vadim Demedes 19.5k Nov 30, 2022