I want to be able to resize my PDF document that I load onto my browser using react-pdf-viewer. The PDF should always fit inside of the browser window and resize if the browser window is shrunk. How can that be done?

If not, how can I make it similar to Chrome’s pdf reader, where you can easily zoom in and out with the trackpad. In react-pdf-viewer, if I npm start with the browser window very small, and then increase the size of the window and zoom in, it starts to get blurry.

Below is my code.`

        import React, { useEffect, useState, useRef } from 'react';
        import { Worker, Viewer } from '@react-pdf-viewer/core';
        import { highlightPlugin } from '@react-pdf-viewer/highlight';
        import '@react-pdf-viewer/core/lib/styles/index.css';
        import '@react-pdf-viewer/highlight/lib/styles/index.css';
        
        const PdfHighlighter = () => {
            const [highlights, setHighlights] = useState([]);
            const [pageDimensions, setPageDimensions] = useState({ height: 0, width: 0 });
            const highlightPluginInstance = highlightPlugin();
            const viewerRef = useRef(null);
        
            // Fetching the highlighting bounding box data from Flask app
            useEffect(() => {
                fetch('http://127.0.0.1:5000/extract-pdf')
                    .then(response => response.json())
                    .then(data => {
                        const highlightAreas = data.flatMap(item => {
                            const pageIndex = item.page - 1;  // Adjusted to parse page number correctly
                            return item.bounding_boxes.map(boundingBox => ({
                                pageIndex: pageIndex,
                                boundingBox: boundingBox,
                            }));
                        });
                        setHighlights(highlightAreas);
                        console.log(highlightAreas);
                    })
                    .catch(error => console.error("Error fetching data:", error));
            }, []);
        
            const handlePageLoad = (e) => {
                const { pageHeight, pageWidth } = e;
                setPageDimensions({ height: pageHeight, width: pageWidth });
            };
        
            const handleResize = () => {
                if (viewerRef.current) {
                    viewerRef.current.style.height = `${window.innerHeight}px`;
                    viewerRef.current.style.width = `${window.innerWidth}px`;
                }
            };
        
            useEffect(() => {
                window.addEventListener('resize', handleResize);
                handleResize(); // Set initial size
        
                return () => {
                    window.removeEventListener('resize', handleResize);
                };
            }, []);
        
            return (
                <div ref={viewerRef} style={{ height: '100vh', width: '100vw', position: 'relative' }}>
                    <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
                        <Viewer
                            fileUrl={`${process.env.PUBLIC_URL}/n3 (1) copy.pdf`}
                            plugins={[highlightPluginInstance]}
                            onPageLoad={handlePageLoad}
                            renderHighlights={(props) => (
                                <div>
                                    {highlights.map((highlight, index) => {
                                        const { height, width } = pageDimensions;
                                        if (height === 0 || width === 0) {
                                            return null;
                                        }
        
                                        // Adjusted coordinate transformation for y-axis inversion
                                        const top = (highlight.boundingBox[1] / height) * 100;
                                        const left = (highlight.boundingBox[0] / width) * 100;
                                        const boxHeight = ((highlight.boundingBox[3] - highlight.boundingBox[1]) / height) *
    100;
                                        const boxWidth = ((highlight.boundingBox[2] - highlight.boundingBox[0]) / width) *
    100;
        
                                        return (
                                            <div
                                                key={index}
                                                style={{
                                                    position: 'absolute',
                                                    background: 'yellow',
                                                    opacity: 0.5,
                                                    top: `${top}%`,
                                                    left: `${left}%`,
                                                    height: `${boxHeight}%`,
                                                    width: `${boxWidth}%`,
                                                    pointerEvents: 'none',
                                                }}
                                            />
                                        );
                                    })}
                                </div>
                            )}
                        />
                    </Worker>
                </div>
            );
        };
        
        export default PdfHighlighter;
        `