React-pdf: How to implement pagination?

[andrewterra]

I was wondering if someone could help me get pagination set up with my PDF's, I tried to follow the steps from this issue but what unable to figure out a solution. It also said that pagination would be coming with v2.0.0 but I was unable to find an example of it.

I am currently loading my PDF onto the page successfully using the following code:

       <Document
           file={`data:application/pdf;base64,${this.state.base64}`}
        >
          <Page pageNumber={this.state.pageNumber} />
        </Document> 

I was wondering if someone could help me set up pagination for my PDF's, or point me in the right direction.

[wojtekmaj]

Hey @terrabl,
what is your issue exactly? The code looks fine. You can manipulate pageNumber to display different page.

[andrewterra]

@wojtekmaj My issue is that when I load the PDF it only shows the first page and does not allow for pagination.

Would following this example from the readme give me the results I want?

class MyApp extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }

  onDocumentLoad = ({ numPages }) => {
    this.setState({ numPages });
  }

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div>
        <Document
          file="somefile.pdf"
          onLoadSuccess={this.onDocumentLoad}
        >
          <Page pageNumber={pageNumber} />
        </Document>
        <p>Page {pageNumber} of {numPages}</p>
      </div>
    );
  }
}

I notice it has that manipulart pageNumber but how does a user change the page of the PDF?

[wojtekmaj]

You need to write mechanism of changing pageNumber yourself. The easiest is

<button onClick={() => this.setState(prevState => ({ pageNumber: prevState.pageNumber + 1 }))}>
Next page
</button>

I think you misunderstood what was implemented in 2.x branch. Starting with 2.x, you can display more than one page by placing several <Page> components. You decide which page is going to be rendered inside them using pageNumber prop.

[andrewterra]

@wojtekmaj Well that was easy! Thanks for the help, I feel like I should have been able to figure that out on my own.

[wojtekmaj]

No worries ;) in test suite I have way much fun with this library for testing purposes, if you need to see what's also possible, check it out. https://github.com/wojtekmaj/react-pdf/blob/master/test/

[ffurkAn]

Is there anyway to get page number while scrolling the document ? I suppose this question is not react-pdf specific. But your experience might help :) @wojtekmaj