React PDF viewer
v1.7.0

Example: Set the page from last visit as the initial page

Assume that whenever user changes page you want to store the current page, and show it when user comes back.

To track the current page, we can rely on the onPageChange event which is triggered when user changes page:

import Viewer, { PageChangeEvent } from '@phuocng/react-pdf-viewer';

const handlePageChange = (e: PageChangeEvent) => {
    localStorage.setItem('current-page', `${e.currentPage}`);
};

<Viewer
    onPageChange={handlePageChange}
/>

As you see, we store the current page on the local storage under the key current-page.

In reality, you might need to change the key as it could include an unique identifier for the document that you want to track:

localStorage.setItem(`current-page-${docId}`, `${e.currentPage}`);

The page from last visit then can be retrieved from the local storage, and be set as the initial page:

const initialPage = localStorage.getItem('current-page')
    ? parseInt(localStorage.getItem('current-page'), 10)
    : 0;

<Viewer
    initialPage={initialPage}
/>

In the following demo, you can scroll to any page of the document, and then refresh the whole page to see that the last page is activated:

(The sample code)

/ 8
90%