React-pdf: LaTeX except more webscale?

[MegaApuTurkUltra]

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?

[diegomura]

Not sure if I can summarize the premise of this library in a concise way, in part because this project it's just starting and we are just discovering the possibilities of what react-pdf can and cannot do. I never used LaTeX before, but if I have to enumerate some benefits I see with this approach, would be:

• Write pdf documents in a declarative way: One of the strengths of React is that is declarative and let you think in _what_ should be rendered, and not _how_ should be done. Also, with JSX this concept gets a lot more powerful, because you can do that with a tag syntax everybody knows.

• Use flexbox for layout: Flexbox is also a very powerful tool. I've used some PDF libraries on which I had to set fixed coordinates to where I wanted to render things on the page. This made my rendering scripts way less maintainable, and it was difficult and time-consuming to get them look the way I wanted. You don't have this problem with react-pdf.

• Dynamic PDFs on the DOM and native platforms: with this project we visualize the possibilities of rendering documents real time on the dom and mobile, based on as many props or parameters the developer wants. Also, making use of the fiber api and pdf incremental updates, we might be able to make PDFs way less static as they are by nature.

• Stay into the same react environment: many many people are using react both on the server and the client. This library enables you to reuse components you have for the dom, but exporting or showing them on a PDF document.

Maybe I'm missing some points, and some are not developed yet, but that's my vision for this projects. I hope this helps

[towerofnix]

Somebody mentioned that this might be useful for automatic localization. That's interesting to think about!

[diegomura]

Can you expand a bit more on that idea @liam4 ?? Sounds interesting

[towerofnix]

Many websites that have support for multiple languages can be automatically translated by using "language files" that contain human-readable language for each string displayed on the page, localized to whatever language the user of the site selects.

For example:

// lang/english.json

{
  "nav.tableOfContents": "Table of Contents"
}

// lang/piglatin.json

{
  "nav.tableOfContents": "Abletay ofway Ontentscay"
}

// index.js

const localize = stringKey => {
  return lang[stringKey]
}

const TableOfContents = () => (
  <div>
    <Heading>{localize('nav.tableOfContents')}</Heading>
    {/* ... */}
  </div>
)

lang is the contents of a language JSON file (as an object). For example, let's compare the output when lang is the contents of lang/english.js:

<div>
  <Heading>Table of Contents</Heading>
</div>

..with the output when lang is the contents of lang/piglatin.js:

<div>
  <Heading>Abletay ofway Ontentscay</Heading>
</div>

It wouldn't take much work to add any other languages, like French - simply create a new language JSON file and use that, e.g. lang/french.json!

So automatic localization (translation) in that way is pretty useful, and I think it could be applied to PDF documents.

(It's not perfect on its own; you'd still want to think about things such as how you want to get formatting to work (e.g. how should "Hello *world*" from the JSON be turned into "Hello world" in the PDF). But it still makes translating the document a lot easier.)

The most significant example I can think of at hand is scratch-www, the source code for https://scratch.mit.edu. As examples, you could look at the language file and React code for the credits page.

[MegaApuTurkUltra]

Thanks for explaining the premise. Could you maybe touch upon my other question, why someone might want to choose this over (PDF)LaTeX?

[diegomura]

I think any of the points I listed can be a valid answer for that question, don't you think?
I don't know how easy would be achieving any of those with (PDF)LaTeX.
Of course, you're always free to use the tool that suits you best for your specific scenario 😄

[jbovenschen]

@liam4 this is something that came to mind when I was thinking about this project. You could just use the same libraries to do localization that you were used to inside your main react application.

Did you also think of how awesome it would be when you could the same redux store inside your pdf as you use within the rest of your react-dom or react-native application.

Want to point you to issue #24 because I think it would be a better place to discuss this.

[jbovenschen]

Guess we can close this issue for now, because @diegomura did answer our goals for this project perfect. Still we hope that people use what they love to use.