I am using PDFTron WebViewer in my react application so the story is that I wanna show new pdf on the viewer whenever user selects a pdf from the list in the same component.
So whenver user selects a document state changes, created a new instance of Webviewer() and store it in a variable of useRef<HTMLDivElement>()
and with useEffect()
cleanup function to dispose the previous instance to load new document.
But on the new instance pdf is not visible. On the first selection of pdf it does but as soon as new pdf is selected I get into this errror which is strange to me.
Here is the code of my PDFTronWebViewer
component.
const PDFTronWebViewer: React.FC<Props> = (props: Props) => {
const viewer = useRef<HTMLDivElement>(null);
const instance = useRef<WebViewerInstance>();
const docView = useRef<Core.DocumentViewer>();
useEffect(() => {
WebViewer(
{
path: '/webviewer/lib',
},
viewer.current!
).then((inst) => {
const { documentViewer } = inst.Core;
instance.current = inst;
docView.current = documentViewer;
inst.UI.loadDocument(props.doc, {
filename: props.doc.name,
});
documentViewer.addEventListener(
'documentLoaded',
props.cb.bind(null, documentViewer.getDocument(), inst)
);
});
// cleanup
return () => {
if(instance.current && docView.current){
instance.current.UI.dispose();
docView.current.removeEventListener('documentLoaded');
}
};
}, [props.doc.name]);
return (
<>
<div
className="webviewer"
ref={viewer!}
style={{ width: props.width, height: '100vh' }}
></div>
</>
);
};