Some test text!
Web / Guides / React
Platform
Documentation
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.
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.
import WebViewer from '@pdftron/webviewer';
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>
);
};
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>
);
};
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 .
Get the answers you need: Support