There seems to be no page zooming function.

[liushuai05]

There seems to be no page zooming function.
I have a problem, that is, I need to display pdf inside a div, but the size of the div is fixed, so if you use the 1:1 method, the pdf may be very blurred, but if you zoom in twice, the pdf content will overflow the scope of the div. Is there any way to solve this problem?

[djsamseng]

Fixed size content box that zooms with scrollbars

import { useRef, useState } from "react";
import { usePdf } from "@mikecousins/react-pdf";

function PdfWithZoom(props: { pdfDocumentUrl: string }) {
  const canvasRef = useRef(null);
  const [ page, setPage ] = useState(1);
  const [ scale, setScale ] = useState(1);
  const { pdfDocument, pdfPage } = usePdf({
    file: props.pdfDocumentUrl,
    page,
    canvasRef,
    scale: scale,
  });
  return (
    <div style={{height: "50vh", width: "50vw", overflow: "scroll", }}>
       <button onClick={() => setScale(scale * 1.1)}>Zoom +</button>
       <button onClick={() => setScale(scale * 0.9)}>Zoom -</button>
       <canvas ref={canvasRef} />
    </div>
  );
}

If you want the content box to grow and shrink instead of having scrollbars then just remove style={{height: "50vh", width: "50vw", overflow: "scroll", }}