PDFTron with webcompomonent and iframe

package.json

@@ -7,7 +7,7 @@
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-scripts": "2.1.1",
-    "@pdftron/webviewer": "^10.0.0"
+    "@pdftron/webviewer": "10.4.0"
   },
   "devDependencies": {
     "btoa": "^1.2.1",
@@ -33,4 +33,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

src/App.js

@@ -1,11 +1,14 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import WebViewer from '@pdftron/webviewer';
 import './App.css';
 
 const App = () => {
   const viewer = useRef(null);
+  const webComponentViewer = useRef(null);
 
-  // if using a class, equivalent of componentDidMount 
+  const [showWebComponent, setShowWebComponent] = useState(false);
+
+  // if using a class, equivalent of componentDidMount
   useEffect(() => {
     WebViewer(
       {
@@ -15,30 +18,39 @@ const App = () => {
       },
       viewer.current,
     ).then((instance) => {
-      const { documentViewer, annotationManager, Annotations } = instance.Core;
-
-      documentViewer.addEventListener('documentLoaded', () => {
-        const rectangleAnnot = new Annotations.RectangleAnnotation({
-          PageNumber: 1,
-          // values are in page coordinates with (0, 0) in the top left
-          X: 100,
-          Y: 150,
-          Width: 200,
-          Height: 50,
-          Author: annotationManager.getCurrentUser()
-        });
-
-        annotationManager.addAnnotation(rectangleAnnot);
-        // need to draw the annotation otherwise it won't show up until the page is refreshed
-        annotationManager.redrawAnnotation(rectangleAnnot);
-      });
-    });
+
+    }).catch(console.log);
   }, []);
 
+  useEffect(() => {
+    if(showWebComponent) {
+
+      WebViewer.WebComponent(
+        {
+          path: '/webviewer/lib',
+          initialDoc: '/files/PDFTRON_about.pdf',
+          licenseKey: 'your_license_key'  // sign up to get a free trial key at https://dev.apryse.com
+        },
+        webComponentViewer.current,
+      ).then((instance) => {
+
+      }).catch(console.log);
+    }
+  }, [showWebComponent]);
+
+  const onWebComponentLoadClick = () => {
+    setShowWebComponent(true)
+  }
+
   return (
     <div className="App">
       <div className="header">React sample</div>
-      <div className="webviewer" ref={viewer}></div>
+      <div>
+        <div className="webviewer" ref={viewer}></div>
+        <button onClick={onWebComponentLoadClick}>Load WebComponent WebViewer</button>
+        {showWebComponent && <div className="webviewerWebComponent" ref={webComponentViewer}></div> }
+
+      </div>
     </div>
   );
 };