Skip to content

A React component for annotating PDF, powered by PDF.js and RecogitoJS

License

Notifications You must be signed in to change notification settings

uzh-bf/recogito-react-pdf

This branch is 1 commit ahead of recogito/recogito-react-pdf:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

34a9615 · Sep 28, 2024
Oct 1, 2021
Nov 16, 2022
Nov 16, 2022
Sep 21, 2021
Sep 14, 2021
Sep 14, 2021
Sep 5, 2023
Sep 28, 2024
Nov 26, 2022
Sep 16, 2021
Oct 12, 2021

Repository files navigation

Recogito-PDF

Annotate a PDF document in React. Powered by PDF.js, RecogitoJS and Annotorious.

A screenshot of the React PDF annotation component

Using the Component

  • Import the PDFViewer component and provide the url to the PDF file
  • It's recommended to set a link to pdf.worker.js from PDF.js (copy included in folder public)
import React from 'react';
import ReactDOM from 'react-dom';
import { pdfjs, PDFViewer } from '@recogito/recogito-react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';

window.onload = function() {

  // Recogito init config (optional)
  // see https://github.com/recogito/recogito-js/wiki/API-Reference
  const config = { /* ... */ };

  // Initial annotations in W3C Web Annotation format
  const annotations = [ /* ... */ ];

  // CRUD event handlers
  const onCreateAnnotation = function () { /* ... */ };
  const onUpdateAnnotation = function () { /* ... */ };
  const onDeleteAnnotation = function () { /* ... */ };

  // Viewer mode can be "paginated" or "scrolling"
  const mode = "paginated"; 

  ReactDOM.render(
    <PDFViewer
      url="compressed.tracemonkey-pldi-09.pdf" 
      mode={mode}
      config={config} 
      annotations={annotations} 
      onCreateAnnotation={onCreateAnnotation} 
      onUpdateAnnotation={onUpdateAnnotation} 
      onDeleteAnnotation={onDeleteAnnotation} />,
    document.getElementById('app')
  );
    
}

About

A React component for annotating PDF, powered by PDF.js and RecogitoJS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 92.4%
  • CSS 7.1%
  • HTML 0.5%