React-pdf: Showing all pages at once

[shivekkhurana]

Hi @wojtekmaj, community,

Thanks for building and maintaining this lib !

While using the module, I have come across a UI where I need to show all pages of the pdf in a scrollable fashion. Currently what I do is along the lines of :

1. Create a hidden div, load first page, save total number of pages to state.
2. Map from [1...this.state.totalPages] and render <ReactPDF ... /> with relevant page number.

Here's what the map code looks like :

{(Array.from({length: this.state.totalPages}, (v, k) => k+1)).map((i) => {
              console.log(i)
              return (
                <div className='w-100 center tc mt3' key={i}>
                  <ReactPDF
                    width={screen.width*0.6}
                    file={'http://localhost:5000/assets/dance.pdf'}
                    pageIndex={i}
                    loading={this.renderLoader()}
                  />
                </div>
              );
            })}

This works, but sends out multiple requests (number of pages + 1) to the resource file. This leads to poor experience as the load time is too much.

Is there a cleaner solution for this ?

Thanks.

[shivekkhurana]

I was able to solve this is the following way :

1. Initialise component state with {pdf: null, initialised: false, totalPages: null}
2. Load pdf file using xhr and save it to state.
3. Have a component which renders only if pdf is not null and initialises by reading the pdf and setting initialised to true and totalPages. This div is inside a hidden container.
4. Map over 0 to totalPages if totalPages !== null and render each page using the pdf in state

Thanks.

[wojtekmaj]

Hey! @shivekkhurana! Just so you know, newest v2.0.0 (alpha) supports multiple pages within one <Document /> component - no need for weird workarounds! :) Let me know what you think!

[geoguide]

Wait, but do you have to know how many pages there are or is there a way to just display all that are there?

[wojtekmaj]

You have to know. And you do know from Document's onLoadSuccess, check Sample.jsx for one of many possible implementations.