Some test text!

Discord Logo

Chat with us

PDFTron is now Apryse, learn more here.

Web / Guides / React

Platform


PDFTron is now Apryse, learn more here.

Integrating React with WebViewer JavaScript PDF library

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.

Prerequisites

Node.js is not required for WebViewer
WebViewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
No trial license key required.
The trial of Apryse SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
Keep your commercial license key confidential.
License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

1. Install WebViewer NPM module

Run the following command in your Terminal or Command Line:

npm i @pdftron/webviewer

2. Copy static assets

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.

3. Place WebViewer into a component

  1. Import WebViewer into your component.
import WebViewer from '@pdftron/webviewer';
  1. 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>
  );
};
  1. 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>
  );
};
  1. 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 .

Next step

Usage Guides Samples API docs

Get the answers you need: Support