Jump to specific page with react pdf while showing all

user_10954646 0
Viewed 741

I want to implement a simple pdf viewer in my react project. To go to the next page I want the user just to scroll. I'm using the package react pdf (https://www.npmjs.com/package/react-pdf), which just works fine for displaying all pages scrollable (as seen in this project: https://codesandbox.io/s/displaying-pdf-using-react-5d003), but the problem is that i want to jump to a specific page on page load.

I would be grateful for a working solution or a package that is able to do both of these things.

Thanks in advance

react-pdf npm reactjs pdf javascript
1 Answers

We can use refs to jump to a specific page while displaying all pages.

const pageRefs = useRef({});
const onItemClick = ({ pageNumber }) =>
    pageRefs.current[pageNumber].scrollIntoView({ behavior: 'smooth' });

Call onItemClick like this in Document tag:

<Document
    file={pdfUrl}
    onLoadSuccess={onDocumentLoadSuccess}
    loading=""
    onItemClick={onItemClick}
>

Add refs to all pages with page number in Page tag:

{Array(...Array(pages))
    .map((x, i) => i + 1)
    .map(page => (
       <div key={page} ref={el => { pageRefs.current[page] = el; }}>
          <Page
              pageNumber={page}
              width={width}
              loading=""
          />
          </div>
))}
user_184154780
Related