PDFViewer not automatically rendering content

[emmanuel-londono]

How can I have the <PDFViewer/> re-render whenever I may changes to <Document/> ?

I'm currently using zustand as a state manager but I haven't been able to make the iframe re-render after a change to the codebase after clicking the rerender button. I'll also opt for using a no-button approach for the iframe rendering automatically.
Any guidance would be appreciated.

import React from "react";
import { Button } from "@mui/material";
import RefreshIcon from "@mui/icons-material/Refresh";
import { PDFViewer, usePDF } from "@react-pdf/renderer";
import { MyDocument } from "~/pages/react-render-test";

export const PDFContainer = () => {
    const pdfBlob = useEventReportStore((store) => store.pdfBlob);
    const setPdfBlob = useEventReportStore((store) => store.setPdfBlob);
    const [instance, update] = usePDF({ document: <MyDocument /> });
    const toggleRenderPDF = () => {
        const blob = instance.blob;
        console.log(blob);
        setPdfBlob(blob);
    };
    return (
        <>
            <Button onClick={toggleRenderPDF}>
                <RefreshIcon />
                Re-render
            </Button>
            {pdfBlob ? (
                <PDFViewer width="1000px" height="1200px">
                    <MyDocument />
                </PDFViewer>
            ) : (
                <div>Loading PDF...</div>
            )}
        </>
    );
};

export default PDFContainer;```


React Version 18.2.0

[emmanuel-londono]

I'm going to use this discussion board as guidance: #887

[wojtekmaj]

It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.

[emmanuel-londono]

Thank you for clearing that up!