If PDFs are static, I don't see why we need to introduce React and JSX. Can someone explain the premise of this project, and why someone might want to choose it over a more popular system such as (PDF)LaTeX?

Would like to be able to graba data from PDF forms.

Hi,

I am getting the following error when trying the example in the README.

Failed to compile.

./~/@react-pdf/core/lib/index.js
Module not found: `/node_modules/@react-pdf/core/lib/stylesheet/index.js` does not match the corresponding path on disk `Stylesheet`.

I am not sure if that makes a difference, but the folder is named 'Stylesheet', while in the import path it is 'stylesheet'.

For reference, I am using the versions published on npm.

Unfortunately react-pdf is already taken on npm (https://github.com/nnarhinen/react-pdf) so we will have to come up with another name 😓 .

@jbovenschen what do you think?

The layout property can be either portrait (the default) or landscape

This is a technical debt that we have. We should have all components tested befrore our first release candidate. In the future, a new feature without tests will not be merged

We will need to document the pdf components and the different libraries, both for the README and for the future site

I tested examples and it works great, but when I tried to load it into my project I got 'SyntaxError: Unexpected token import', I believe that's because the lib is not compiled into es5?

I'm using react-create-app, and everything is written in es6 and works fine, just not sure what's the proper way to handle this? Thanks!

What is the current behavior?
I installed yarn for the first time per brew on mac. When trying to yarn install this project it seems to freeze on installing external dependencies. Nothing is happening for a long time:

What is the expected behavior?
Finishing the installation.

Please mention your node.js, yarn and operating system version.
node.js 7.10.0
yarn 0.24.5
macOS Sierra 10.12.4

Since we are currently having issues about how Yoga is calculating the layout of text and images, I want list here some basic use cases that must work before releasing:

• 1 - Just Text
• 2 - Just Images
• 3 - Text within FlexDirection: column
• 4 - Text within FlexDirection: column, fixed height
• 5 - Text within FlexDirection: row
• 6 - Text within FlexDirection: row, fixed width
• 7 - Image within FlexDirection: column
• 8 - Image within FlexDirection: column, fixed height
• 9 - Image within FlexDirection: row
• 10 - Image within FlexDirection: row, fixed width

Would be nice to always have the examples up-to-date with the codebase.

We can add something like yarn example -- all and call it in the precommit or prepush hooks

The size property can be either an array specifying [width, height] in PDF points (72 per inch), or a string specifying a predefined size.

List of predefined sizes:

• A0-10
• B0-10
• C0-10

For ref: https://github.com/devongovett/pdfkit/blob/master/demo/test.coffee

For ref: https://github.com/devongovett/pdfkit

Text rendering phase should support many children, and not just a text string as it is right now

Make it possible to render pdf's inside react-native.
Same way as the react-pdf-dom package works.

Is it planned to add support for custom fonts? it is needed for stylistic reasons and to support non-latin languages.

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.

For ref: https://github.com/devongovett/pdfkit

If an element does not have a style attribute set, it should use it's parents. If none of them has it, should use a default one

My setup:

$ mkdir pdf
$ cd pdf
$ yarn add react
$ yarn add @react-pdf/core
$ node index.js
# index.js simply 'require's @react-pdf/core
Error: Cannot find module 'lodash/fp/toPairsIn'

Adding lodash via yarn add lodash fixes the issue. (Am I supposed to do yarn add react-pdf, not yarn add @react-pdf/core..?)

For ref: https://github.com/devongovett/pdfkit

It would be very cool to have people suggesting logos and vote to choose one. So, if someone wants to suggest and design a logo, please feel free to do it!

For reference: https://facebook.github.io/react-native/docs/stylesheet.html

I tried to make the package work in the browser, but ran into a bunch of issues along the way:

• the official example uses an outdated version of @react-pdf/dom (0.1.6) referencing the wrong core package (react-pdf instead of @react-pdf/core)
• browser environments don't provide fs, tls and net. create-react-app conveniently mocks them out, but I figured to still mention it for people using a different setup
• with above two points fixed I'm still getting below error, which I wasn't able to resolve yet

Does anyone know what's the matter or has a local setup that works browser-side?

We should be able to add '.jpg' and '.png' images to the pdf document

This includes author, title and any other possible attribute. It should also include that the document was made with react-pdf

note(x, y, width, height, contents, options)
textAnnotation(x, y, width, height, text, options)

Hey i have cloned your repo locally..can u plz help me in running the examples..because the example mention yarn example -- fractals doesn't seem to work.And the sub-folders have their own package.json do we have to install them explicitly?
Thanks.

The idea is to gain full compatibility with react-primitives.

This will make it easier to render existing react-components within a pdf, things which would be made possible when supporting this will be:

• Export to PDF of a part of your app.
• Using react-router within PDF.
  Guess I miss a lot of possibilities :).

Things we can support (as far as I know):
Done

• View
• StyleSheet

In Progress

• Text
• Image

Not possible

• Animated (Maybe possible but we should improve current performance)
• Touchable (No interactions possible in PDF).

For both Animated and Touchable we need to figure out how to not break components which use both of those primitives.

Also nice to have is full compatibility with react-primitives-svg.

@diegomura What do you think?

Interesting project for sure! Are there any plans on supporting third party plugins? I have previously created a table plugin for jspdf jspdf-autotable and was wondering if this is something that will be possible in react-pdf.

Oh and btw, any plans on supporting tables natively?

highlight(x, y, width, height, options)

As discussed in #24, we will implement react-pdf to use pdfkit as a pdf rendering tool.
Because we aim to do things that this library doesn't support, maybe this change is just to release a v1 as soon as possible, and then see what's best.

Gain compatibility with react-primitives-svg.

For ref: https://github.com/devongovett/pdfkit

As promised some write up about my personal idea's I wish to have within a pdf renderer within React.

First of all the idea to create pdf's with the declerative syntax of react sounds amazing, also composing a PDF of more composable Components.

Ideas

1. Support react-dom and react-native
2. Using react-primitives (View and Text).
3. Support Flex Layout with Yoga
4. Get rid of pdfkit
5. Support community extensions

Support react-dom and react-native

To support those two render targets we could make 2 separate packages "react-pdf-dom" and "react-dom-native" we could do it within separate repo's but personally I like to keep all the relavant code within the same code base, this can be archived with a solution like lerna what is your opinion about that? @diegomura

As an example the idea of a cross-renderer react renderer can be seen within the react-art-fiber renderer, public here.

Using react primitives

The idea is to have two main building blocks for your pdf render target.

Those two will be Text and View, the reason I think this would be a great idea, is that it is used in other react renderers so it would feel less ancient. Within this repo there is some more explanation about this reasoning.

Support Flex Layout with Yoga

This is something we can't currently archive, the reason behind is that pdfkit does have it's own kind of layout rendering and / or calculations.

Things we should do before we could support this kind of magic is:

• Make our own implementation of document streaming. (Will also be handy if we want to support extensions from outside packages).
• let Yoga calculate coordinates within the pdf file.
• Make internal diffing possible before editing the pdf file.

I could have missed some.

Get rid of pdfkit

This is not because pdfkit is bad or something, it is just that it makes it more difficult to archive the goals mentioned in the comment, we still will be using fontkit I guess because text measuring is hard.

Support community extensions

This will be something I don't even know how to implement yet, but should be doable when we have defined our own pdf primitives. It's something that would be great but not relevant yet.

Do you have some other thoughts?

This will be needed for #53, and maybe more future features. async/await will be handy for this process

Hey guys, could you please help me with this error

../~/@react-pdf/core/lib/elements/Text.js
Module not found: Can't resolve 'lodash.isnan' in '/node_modules/@react-pdf/core/lib/elements'

I created a react app using creat-react-app and added following:
yarn add @react-pdf/core
yarn add @react-pdf/node

After that, I copy pasted the sample code given on git (https://github.com/diegomura/react-pdf)

Do I have to install this missing dependency?

Hi, I'm having trouble getting the examples to run. I cloned the repo with
git clone https://github.com/diegomura/react-pdf.git, then
cd react-pdf
yarn install

 ~/dev/react-pdf ±master⚡ > yarn example -- fractals
yarn example v0.15.1
$ "babel-node ./examples/index.js" fractals
sh: babel-node ./examples/index.js: No such file or directory
error Command failed with exit code 127.
info Visit http://yarnpkg.com/en/docs/cli/example for documentation about this command.

Although the file ./examples/index.js is actually there. Then I tried running babel-node directly:

babel-node ./examples/index.js fractals
{ Error: Cannot find module 'react'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/moriz/dev/react-pdf/examples/fractals/index.js:3:1)
    at Module._compile (module.js:571:32)
    at loader (/Users/moriz/.nvm/versions/node/v7.5.0/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/moriz/.nvm/versions/node/v7.5.0/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12) code: 'MODULE_NOT_FOUND' }

I tried installing the react package in the root dir with yarn add react, then I'm getting this error, after which I'm not sure anymore what to do:

 ~/dev/react-pdf ±master⚡ > babel-node ./examples/index.js fractals
{ Error: Cannot find module '@react-pdf/core'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/moriz/dev/react-pdf/packages/react-pdf-node/lib/index.js:15:13)
    at Module._compile (module.js:571:32)
    at loader (/Users/moriz/.nvm/versions/node/v7.5.0/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/moriz/.nvm/versions/node/v7.5.0/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12) code: 'MODULE_NOT_FOUND' }

Node version v7.5.0
yarn version 0.15.1
macOS Sierra 10.12.4

I am testing out react-pdf as an alternative to our current approach and so far it is very interesting. I really like the concept to use react to define the pdf versus individual render calls.

To the point when I try to create lines of text in a PDF changing the fontSize style is resulting in whitespace about and below the text. It almost seems that the logic to compute the size of the element still thinks it is the default 18.

Here is a PDF illustrating what I am seeing:
example.pdf

Here is the code used to generate the example:

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/core';
import ReactPDF from '@react-pdf/node';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
  },
  textSmall: {
    fontSize:8,
    margin:0,
    padding:0,
    height:10,
  },
  textLarge: {
    fontSize: 12,
    margin:0,
    padding:0,
  }
});

// Create Document Component

const lines = (count) => {
  let lines = [];
  for (let i = 0; i < count;i++) {
    let s = {};
    if (count > 20) s = styles.textSmall;
    else if (count > 10) s = styles.textLarge;
    lines.push(<Text key={i} style={s}>
      {'Line #' + (i+1)}
    </Text>);
  }
  return lines;
};

const MyDocument = () => (
  <Document>
    <Page size="A4">
      <View>
      {lines(40)}
      </View>
    </Page>
    <Page size="A4" style={styles.page}>
      <View>
      {lines(20)}
      </View>
    </Page>
    <Page size="A4" style={styles.page}>
      <View>
      {lines(10)}
      </View>
    </Page>
  </Document>
);

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

We dont have yet a neat way of defining and appying what are the default props and styles to be applied to elements.

I imagine something like:

class Text extends PDFEntry {
  defaultProps = {
    // props here
  }

 // ...
}

We currently have a '@react-pdf/examples' private package that run examples.

We should be able to run all examples for every platform (node/dom/native) in a neat way. My suggestion would be by running something like this:

yarn example -- <example-name> <platform-name>

Ex.
yarn example -- fractals dom
yarn example -- fractals node

If no platform name is specified, it should be node.

The command format may change

The callback should be called after the rendering process finishes.

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?

This will be useful on the dom and native environments. Maybe we can benefit from PDF incremental updates for this.

For ref: https://github.com/devongovett/pdfkit