Naan and Paneer Makhani

    @recogito/recogito-react-pdf

    0.8.4 • Public • Published

    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={onCreateAnnotation} 
          onDeleteAnnotation={onCreateAnnotation} />,
        document.getElementById('app')
      );
        
    }

    Install

    npm i @recogito/recogito-react-pdf

    DownloadsWeekly Downloads

    186

    Version

    0.8.4

    License

    BSD-3-Clause

    Unpacked Size

    2.12 MB

    Total Files

    21

    Last publish

    Collaborators

    • aboutgeo