This guide will help you integrate a free trial of WebViewer into a React application on the browser. You can also checkout a ready to go sample on GitHub.

Get the React sample source code here

• Node.js and npm

Run the following command in your Terminal or Command Line:

npm 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.

1. Import WebViewer into your component.

import WebViewer from '@pdftron/webviewer';

2. Create a reference where WebViewer will be placed or mounted.

import {useRef} from 'react';

const MyComponent = () => {
  const viewer = useRef(null);

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
    </div>
  );
};

3. 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.

import {useEffect, useRef} from 'react';
import WebViewer from '@pdftron/webviewer'

const MyComponent = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: '/webviewer/lib',
        initialDoc: '/files/pdftron_about.pdf',
      },
      viewer.current,
    ).then((instance) => {
        const { documentViewer } = instance.Core;
        // you can now call WebViewer APIs here...
      });
  }, []);

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
    </div>
  );
};

4. 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 .

Usage Guides Samples API docs