React and WebViewer

Content.

JavaScript

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

function App() {
  // Create reference to DOM element where WebViewer will mount
  const viewerRef = useRef(null);

  useEffect(() => {
    // Initialize WebViewer once when component mounts
    WebViewer(
      {
        // Path to copied WebViewer static assets
        path: '/lib/webviewer',
        // Replace with your Apryse license key
        licenseKey: 'YOUR_LICENSE_KEY',
        // Initial document to load when WebViewer starts (optional)
        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
      },
      // Attach WebViewer to container element
      viewerRef.current
    ).then((instance) => {
      // Access WebViewer instance here if needed
      // const { UI, Core } = instance;
    });
  // Empty dependency array ensures this runs only once  
  }, []);
  return (
    // Container element for WebViewer
    <div
	    ref={viewerRef}
	    style={{ height: '100vh', width: '100%', margin: '0 auto' }}
	  />
  );
}

export default App;

sfjskfjk

First Tab

windows

Untitled