How to Make a React App With ComPDF for Web

Prerequisites

To get started, you'll need:

• The latest stable version of Node.js.
• A package manager compatible with npm.
• Apply the License Key: Contact ComPDFKit's sales team to get a free 30-day license to test the project.

Create a New Project

1. Create a new React project:

npx create-react-app compdfkit-app

2. Change your directory to compdfkit-app:

cd compdfkit-app

Add ComPDF for Web

1. Install webviewer as a dependency with npm:

npm i @compdfkit_pdf_sdk/webviewer --save

2. Add the "webviewer" folder that contains the required static resource files to run the ComPDFKit Web demo, to your project’s public resource folder.The folder you need to copy is node_modules/@compdfkit_pdf_sdk/webviewer/dist.

cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./public/webviewer

Display a PDF

1. Add the PDF document you want to display to the public/webviewer/example directory. You can use our demo document as an example.

2. When using the Web SDK, you need to use the path parameter to tell it where the copied static resources are located, if not, they will be relative to the current path.

Add the following code to your src/webviewer.js file:

import { useEffect, useRef } from 'react';
import ComPDFKitViewer from '@compdfkit_pdf_sdk/webviewer';

export default function WebViewer() {
  const containerRef = useRef(null);

  useEffect(() => {
    let docViewer = null;

    ComPDFKitViewer.init({
      path: '/',
      pdfUrl: './example/developer_guide_web.pdf',
      license: '<Input your license here>'
    }, containerRef.current).then((instance) => {
      docViewer = instance.docViewer;
      docViewer.addEvent('documentloaded', async () => {
        console.log('ComPDFKit Web Demo loaded');
      })
    })
  }, []);

  return <div ref={containerRef} style={{ width: "100%", height: "100vh", overflow: "hidden" }} />
}

3. Replace the contents of the src/App.js file with the following. This includes the newly created component in your app:

import WebViewer from './webviewer.js';

function App() {
  return (
    <div className="App">
      <WebViewer />
    </div>
  );
}

export default App;

4. Start the app and open it in your default browser:

npm start