react-pdf with SizeMe

Currently I’m using react-pdf to display a pdf file. But it’s not quite easy to control how it displayed.

This is how I make the file fit the width of the parent component (ref from the internet)

import { SizeMe } from "react-sizeme";
//...
<SizeMe>
  {({ size }) => (
    <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess}>
      {numPages &&
        Array.from({ length: numPages }, (_, index) => (
          <Page
            renderAnnotationLayer={false}
            key={`page_${index + 1}`}
            pageNumber={index + 1}
            width={size.width ? size.width : 1}
          />
        ))}
    </Document>
  )}
</SizeMe>

This post is imported from: https://thebrownbox.hashnode.dev/react-pdf-with-sizeme