PDF Content Not Displaying After Re-render

[Manoj98Gopal]

Library: @cyntler/react-doc-viewer

Problem:
I am encountering an issue with the @cyntler/react-doc-viewer library in my React project. I'm using the library to display PDF documents. However, I've noticed that when the component re-renders, the PDF content does not display properly; only the header is visible.

Steps to Reproduce:

Integrate the @cyntler/react-doc-viewer library into a React project.
Render a PDF document using the library.
Trigger a re-render of the component containing the PDF viewer (e.g., through state updates).
Observe that after the re-render, only the header of the PDF viewer is displayed, and the PDF content is missing.
Expected Behavior:
The @cyntler/react-doc-viewer should properly render and display the PDF content even after the component re-renders. The PDF document should remain visible and functional throughout the component's lifecycle.

Additional Information:

I have verified that the PDF URLs are being updated correctly when the component re-renders.
The issue does not appear to be related to the PDF document itself, as the content displays fine initially.
I have also checked the browser console for any error messages, but no errors are reported during the re-render process.
Environment:

React version: ^18.1.0
Library version: @cyntler/react-doc-viewer ^1.13.0
Browser: Chrome
Possible Workarounds:
As a temporary solution, I have not rerendered this component with the help of useMemo hook

I would appreciate any guidance or insights into resolving this issue. Thank you for your assistance.

[tanu2805]

I was facing this problem too, in this particular application we had an array of PDFs and were switching between PDFs based on the chosen number(essentially re-rendering). But like u mentioned, the PDF wouldn't load upon re-rendering. So as a make shift solution, i am currently re-mounting the component everytime it re-renders. Use the 'key={viewerKey}' propr and update the viewerKey state with every render. This solution is currenly working for me.

Attaching code snippet here:

const [viewerKey, setViewerKey] = React.useState(0); //Viewer key state

React.useEffect(() => {

setViewerKey((prevKey) => prevKey + 1);   // update the viewer key when url changes(re-renders when url changes)

}, [url]);

<DocViewer
documents={docs}
key={viewerKey} // when the key changes the component re-mounts
initialActiveDocument={docs[0]}
pluginRenderers={DocViewerRenderers}
style={{ height, backgroundColor: "grey" }}
config={{
header: { disableHeader: true },
}}
/>

[RoshanShrestha123]

I was facing this problem too, in this particular application we had an array of PDFs and were switching between PDFs based on the chosen number(essentially re-rendering). But like u mentioned, the PDF wouldn't load upon re-rendering. So as a make shift solution, i am currently re-mounting the component everytime it re-renders. Use the 'key={viewerKey}' propr and update the viewerKey state with every render. This solution is currenly working for me.

Attaching code snippet here:

const [viewerKey, setViewerKey] = React.useState(0); //Viewer key state

React.useEffect(() => {

setViewerKey((prevKey) => prevKey + 1);   // update the viewer key when url changes(re-renders when url changes)

}, [url]);

<DocViewer documents={docs} key={viewerKey} // when the key changes the component re-mounts initialActiveDocument={docs[0]} pluginRenderers={DocViewerRenderers} style={{ height, backgroundColor: "grey" }} config={{ header: { disableHeader: true }, }} />

Thank you, this fixed the issue for me.