open the console and then click on the links in the pdf document
import { useState, useCallback } from "react";
import { pdfjs, Document, Page } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;
export default function App() {
const [numPages, setNumPages] = useState<number>();
const [pageNumber, setPageNumber] = useState<number>(1);
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
setNumPages(numPages);
}
const onItemClickCallback = useCallback(
(dest) => {
console.log(`I clicked on an item in a document with ${numPages} pages`);
},
[numPages]
);
return (
<div>
<Document
onItemClick={onItemClickCallback}
file="https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf"
onLoadSuccess={onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber} />
</Document>
<p>
Page {pageNumber} of {numPages}
</p>
</div>
);
}
Expected behavior
I clicked on an item in a document with 2 pages
Actual behavior
I clicked on an item in a document with undefined pages
Additional information
Appreciate this is a contrived example.
My actual use case is
on document load success i build a ref for each page
on item click i want to scroll to that page
but like numPages here my array of page refs remains undefined
Before you start - checklist
Description
onItemClick does not appear to update if the function applied changes
Steps to reproduce
Codesanbox here https://codesandbox.io/p/sandbox/react-pdf-test-vzqct5?file=%2Fsrc%2FApp.tsx%3A1%2C1-35%2C1
open the console and then click on the links in the pdf document
Expected behavior
I clicked on an item in a document with 2 pagesActual behavior
I clicked on an item in a document with undefined pagesAdditional information
Appreciate this is a contrived example.
My actual use case is on document load success i build a ref for each page on item click i want to scroll to that page but like numPages here my array of page refs remains undefined
Environment