Merge pull request #10 from mblink/lv-fix-for-double-render-react-18

Fixed doc viewer rendering twice in react18
mblink · Nov 18, 2022 · fb8a570 · fb8a570
2 parents 4d36115 + 30d5366
commit fb8a570
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "document-viewer-ts",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "PDF and MS Doc viewer written in TypeScript for React and vanilla JavaScript",
   "main": "dist/lib/index.js",
   "module": "dist/es2015/index.js",

diff --git a/src/Viewer.tsx b/src/Viewer.tsx
@@ -8,7 +8,14 @@ type ViewerProps = {
 
 export const Viewer: React.FC<ViewerProps> = (props: ViewerProps) => {
   const viewerContainer = useRef<HTMLDivElement>(null);
-  useEffect(() => { viewerContainer.current && renderDocument(viewerContainer.current); }, []);
+  useEffect(() => {
+    viewerContainer.current && renderDocument(viewerContainer.current);
+
+    return () => {
+      viewerContainer.current && viewerContainer.current.firstElementChild && viewerContainer.current.removeChild(viewerContainer.current.firstElementChild);
+    };
+  }, []);
+
   return <div
     ref={viewerContainer}
     className="viewer-container"