Zoom in/Zoom out using React-PDF

Question

In my ReactJS application I need to add the functionality of zoom in/zoom out. I am using react-pdf to display PDF in my web app. A/C to the documentation there is a scale prop by using which I can scale the pdf page.

But using scale prop doesn't showing me any change in zoom factor. Here is the code which I am using to do so.

<Document
        loading=""
        file={file}
        className="document"
        onLoadSuccess={(transport) => onLoadSuccess(transport, sectionIndex)}>
        <Page width={900} scale={30} className="page" pageNumber={1} />
    </Document>

I have tried following values for scale prop but doesn't seem to get anything. 1.5, 0.5 , 10 , 30 ,40. Is there any better way of doing the same or I am missing something?

Answer 1

Change it to scale={5.0} (or whatever value you want to test), you'll get zoomed in.

The scale prop takes a decimal value separated by .

Hope it helps :)

Answer 2

It looks like you can't have a hard coded width and change the scale, from just having this issue myself. My approach is going to be multiplying the page width by a tracked ratio in internal state.