Create a page tracker in react-pdf

Question

I am creating a pdf viewer using react-pdf, I want to implement a page tracker in the pdf viewer, so that user can navigate to any page typed in the input box. And the page number should also update when the user reaches any page with that specific page number. I am not able to implement this. Here is the image of the page tracker -

Please help me solve this problem.

score 0 · Answer 1 · answered Mar 18 '21 at 17:52

I think you can use this if you can get the page number from change event.

import {useState} from 'react'

function Component(){
  const [pageNumber, setPageNumber] = useState(1)

  const onChangeHandler = (data) => {
    setPageNumber(data.pdfPageNumber)
  }
  return(
      <>
        <PdfViewer onStateUpdate={onChangeHandler}/>
        <pageNumber>{pageNumber}</PageNumber>
      </>

  )
}

Or you can use the useRef hook or useEffect hook.

Thank you.

Create a page tracker in react-pdf

1 Answers1