React-pdf: Improve examples usage

[diegomura]

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

[steric85]

I am new to React. I wanted to try your example, but running the above command gives error. Can you please tell me how to do so?

[diegomura]

@steric85 the above commends were just a proposal.
To run the examples, you can either clone this repo, do a yarn install and then yarn example -- <example-name>.

Also, you can create a small project and run your examples there. I uploaded a gist where I put all files needed to have this working. You will need to have babel-cli installed, and all you have to do is download those files, yarn install and yarn start

[carlorizzante]

Examples won't work on my machine either.

Cloning the repo, installing all dependencies via yarn, and running "yarn example -- fractals" results in an error:

Error: Cannot find module '../../dist/react-pdf.es.js'

[prideaux]

BRIEF EDIT / ADDITIONAL INFO
_I believe the errors I am encountering (maybe others) are due to using create-react-app my-app and not babel-cli (the comment by @diegomura above on 24 Jun 2017 details this) - feedback welcomed_

---

@carlorizzante

I had some issues also so thought I'd comment in the hope that it helps, I also posted some comments here:

https://spectrum.chat/thread/ff206ff0-9123-4159-8983-a1eb54f8aef0

My main problem was that I could not 'Save in a file' (save a generated PDF), I did manage to create a PDF that was viewable in a browser using the 'Render in DOM' - Even though I still cannot 'Save in a file' I then was lucky enough to found this link https://github.com/diegomura/react-pdf/issues/84 which is very helpful with some great code examples....

_Here is how I did a simple test, open to any comments to make a simpler/quicker test - also I use npm out of habit ;-)_

I am not saying this is the correct way to do this but it worked for me to get proof of concept. I will post back with examples of text, images, multiple pages, page wrap and styling etc when I have finished testing and also if I manage to successfully integrate a way to 'Save in a file' .

1. Using info here: https://github.com/facebook/create-react-app I created a clean react app.

• create-react-app my-app

• cd my-app

1. Using info here: https://github.com/diegomura/react-pdf

• yarn add @react-pdf/renderer

• npm start

1. I then replaced the code in App.js (generated in step 1) with code copied from https://github.com/diegomura/react-pdf/issues/84:

import React, { Component } from "react";
import { Page, Text, Document } from "@react-pdf/renderer";

class App extends React.Component {
  state = { url: null };

  onRender = ({ blob }) => {
    this.setState({ url: URL.createObjectURL(blob) });
  };

  render() {
    return (
      <React.Fragment>
        <Document shallow onRender={this.onRender}>
          <Page size="A4" wrap>
            <Text>I was created on the fly!</Text>
          </Page>
        </Document>
        <a href={this.state.url} download={`document.pdf`}>
          Download
        </a>
      </React.Fragment>
    );
  }
}

export default App;

This worked for me in the most basic form which gave me:

• A PDF rendered to DOM (in the browser) -> Render in DOM

• A download link to download the PDF generated on the fly.

  I hope it helps you 👍

_If anyone else can can add to the code above to save the PDF also (Save in a file) that would be great!_

[prideaux]

@diegomura

Also, you can create a small project and run your examples there. I uploaded a gist where I put all files needed to have this working. You will need to have babel-cli installed, and all you have to do is download those files, yarn install and yarn start.

I've tried wiht files at https://gist.github.com/diegomura/eccbf3dd4c277e0b73547e581eb0ab3e

I can't get a working version where I can use:

ReactPDF.render(doc, '${__dirname}/output.pdf');

I think it is due to the fact I created my app using:

create-react-app my-app

Which means I am probably having some kind of issue with _babel_

Any way to add this to an app created using create-react-app my-app ?

Thanks.

[diegomura]

Hey!
Glad that worked for you @prideaux !
Some comments on what you wrote:

• The shallow prop is not part of the API yet and you can remove it from your code. We are still discussing the best way of achieving this.
• The gist files at the link you shared are very old and pointing to the old react-pdf build, using @react-pdf/node and /core (just in case)
• I think you are mixing some concepts here. React-pdf works both on the DOM and Node with some very small changes. To use it in the Web, you just have to add the <Document /> structure in a render method of a component (as you are already doing). To use it in the server, you just have to call ReactPDF.render method, specifying the path where you want to save your file. However, you cannot use the Node API in a web environment (such as with create-react-app). I don't think it has to do with babel though, but to the fact that you are trying to save a file to disk from the web

This particular issue was created to improve how examples should be run (yarn example -- name), and not because of this. I don't think that's important anymore, so I close this in favor of #286 , in which I'll work now. Thanks 😄