Integrate WebViewer JavaScript PDF Viewer & Editor into a React App

This guide will show you how to integrate WebViewer Document Viewer & Editor into a React application.

You can watch a step-by-step video to help you get started.

You can also download a ready-to-go sample on GitHub.

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

Run the following command in your Terminal or Command Line:

1npm i @pdftron/webviewer

Next we must copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible. In React, it will be public folder.

Inside of a GitHub project, we automate the copying of static resources by executing copy-webviewer-files.js.

Import WebViewer into your component.

1import WebViewer from '@pdftron/webviewer';

Create a reference where WebViewer will be placed or mounted.

1import {useRef} from 'react';
2
3const MyComponent = () => {
4  const viewer = useRef(null);
5
6  return (
7    <div className="MyComponent">
8      <div className="header">React sample</div>
9      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
10    </div>
11  );
12};

Inside of useEffect hook or componentDidMount lifecycle method initialize WebViewer. Ensure that the path property in the constructor points to where you copied static assets node_modules/@pdftron/webviewer/public in React public folder. Add your own license key in place of 'YOUR_LICENSE_KEY'.

1import {useEffect, useRef} from 'react';
2import WebViewer from '@pdftron/webviewer'
3
4const MyComponent = () => {
5  const viewer = useRef(null);
6
7  useEffect(() => {
8    WebViewer(
9      {
10        path: '/webviewer/lib',
11        licenseKey: 'YOUR_LICENSE_KEY',
12        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
13      },
14      viewer.current,
15    ).then((instance) => {
16        const { documentViewer } = instance.Core;
17        // you can now call WebViewer APIs here...
18      });
19  }, []);
20
21  return (
22    <div className="MyComponent">
23      <div className="header">React sample</div>
24      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
25    </div>
26  );
27};

1import {useEffect, useRef} from 'react';
2import WebViewer from '@pdftron/webviewer'
3
4const MyComponent = () => {
5  const viewer = useRef(null);
6
7  useEffect(() => {
8    WebViewer(
9      {
10        path: '/webviewer/lib',
11        licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
12        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
13      },
14      viewer.current,
15    ).then((instance) => {
16        const { docViewer } = instance;
17        // you can now call WebViewer APIs here...
18      });
19  }, []);
20
21  return (
22    <div className="MyComponent">
23      <div className="header">React sample</div>
24      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
25    </div>
26  );
27};

Run the app by running npm start.

You can now checkout other guides like sharing WebViewer instance across components, how to open your own documents or how to disable certain features.