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