React-pdf: Render pages in same way as the PDF.JS demo?

[8enSmith]

If you view the demo on the PDF.JS page, you can see that the PDF pages are rendered as a scrollable list of pages on a grey background:

Is there a way to configure react-pdf to render a document in the same way?

I've looked at the Document component and the only seam into the PDF.js library appears to be via the options parameter where I can only set PDF.js' DocumentInitParameters.

[rkram5424]

React-pdf only loads, renders, and displays PDFs. We have to create the controls and toolbar on our own.
That being said, I wonder if anyone has already created a toolbar component we can just drop in and hook up to the document/page props.

[8enSmith]

Thanks for the update @rkram5424 . I did suspect that I needed to use an additional wrapper to render the toolbar and background. What I'd specifically like is the way that the PDF.js demo separates the pages in a scrollable view.

I'll do some Googling to see if I can find such a PDF wrapper component!

[wojtekmaj]

Sadly we're far from getting there. This has been discussed in #89 and kinda in #69. Hope the info in these topics will help you.

[8enSmith]

Thanks for the update @wojtekmaj. At least I know for sure that what I want is not possible with react-pdf. Keep up the fantastic work.

[biyunwu]

@8enSmith

If your goal is only to "render PDF as a scrollable list of pages on a grey background", it can be easily done:

• Getting the pages number from onDocumentLoadSuccess function which is provided. Then, render every page though the component as the following code.

<Document
     file={{data: data}}
     onLoadSuccess={this.onDocumentLoadSuccess}
>
      <Page
           pageNumber={1}
      />
      <Page
           pageNumber={2}
      />
      .....
     <Page
           pageNumber={lastPageNumOfThePDF}
      />
</Document>

• Customizing the styling through CSS.

That's it!

[wojtekmaj]

Just be sure not to kill the browser with too heavy task to do :) Render minimum amount of pages at a time, for example using React-Virtualized or some custom solution.