1'use client';
2
3import { WebViewerInstance } from '@pdftron/webviewer';
4import { Ref, useEffect, useState, useRef } from 'react';
5
6export default function Viewer() {
7 const viewer: Ref<HTMLDivElement | any> = useRef(null);
8 const [webviewerInstance, setWebViewerInstance] = useState<WebViewerInstance | any>(null);
9
10 useEffect(() => {
11 // Due to SSR in Next.js, we need to import the module dynamically, to avoid window is not defined error due to re-rendering.
12 // Read more here: https://github.com/vercel/next.js/discussions/42319
13 import('@pdftron/webviewer').then((module) => {
14 const WebViewer = module.default;
15 WebViewer(
16 {
17 path: '/lib/webviewer',
18 initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
19 licenseKey: 'your_license_key' // sign up to get a free trial key at https://dev.apryse.com
20 },
21 viewer.current,
22 ).then((instance: WebViewerInstance) => {
23 const { documentViewer, annotationManager, Annotations } = instance.Core;
24 // Run APIs here.
25
26 documentViewer.addEventListener('documentLoaded', () => {
27 const rectangleAnnot = new Annotations.RectangleAnnotation({
28 PageNumber: 1,
29 // values are in page coordinates with (0, 0) in the top left
30 X: 100,
31 Y: 150,
32 Width: 200,
33 Height: 50,
34 Author: annotationManager.getCurrentUser()
35 });
36
37 annotationManager.addAnnotation(rectangleAnnot);
38 // need to draw the annotation otherwise it won't show up until the page is refreshed
39 annotationManager.redrawAnnotation(rectangleAnnot);
40 });
41 setWebViewerInstance(instance);
42 });
43 });
44 }, []);
45
46 return (
47 <div className="h-full w-full" ref={viewer}></div>
48 );
49}
50
51