Integrate WebViewer into React

1import React, { useRef, useEffect } from 'react';
2import WebViewer from '@pdftron/webviewer';
3import './App.css';
4
5const App = () => {
6  const viewer = useRef(null);
7
8  useEffect(() => {
9    WebViewer(
10      {
11        path: '/lib/webviewer',
12        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
13        licenseKey: 'YOUR_LICENSE_KEY',  // sign up to get a free trial key at https://dev.apryse.com
14      },
15      viewer.current,
16    ).then((instance) => {
17      const { documentViewer, annotationManager, Annotations } = instance.Core;
18
19      documentViewer.addEventListener('documentLoaded', () => {
20        const rectangleAnnot = new Annotations.RectangleAnnotation({
21          PageNumber: 1,
22          // values are in page coordinates with (0, 0) in the top left
23          X: 100,
24          Y: 150,
25          Width: 200,
26          Height: 50,
27          Author: annotationManager.getCurrentUser()
28        });
29
30        annotationManager.addAnnotation(rectangleAnnot);
31        // need to draw the annotation otherwise it won't show up until the page is refreshed
32        annotationManager.redrawAnnotation(rectangleAnnot);
33      });
34    });
35  }, []);
36
37  return (
38    <div className="App">
39      <div className="header">React sample</div>
40      <div className="webviewer" ref={viewer}></div>
41    </div>
42  );
43};
44
45export default App;
46