react-render-pdf-lite

A React PDF viewing component with virtualized scrolling and highlights. Built on top of react-pdf and react-virtuoso.

Installation

npm install react-render-pdf-lite

Features

• Virtualized Scrolling: Efficiently renders only the visible pages using react-virtuoso, ensuring smooth performance even for large PDF documents.
• Highlights: Render custom highlighted areas over the PDF.
• Scroll to Highlight: Programmatically scroll to specific highlights with a smooth blinking animation indicating the target.
• Customizable: Adjust viewer width and background color to fit your application's design.

Usage

import React, { useRef, useState } from 'react';
import ReactRenderPdfLite from 'react-render-pdf-lite';

const MyPdfViewer = () => {
  const viewerRef = useRef(null);
  const [numPages, setNumPages] = useState(null);

  const highlights = [
    {
      pageIndex: 0, // 0-indexed page number
      x: 10, // X-coordinate percentage
      y: 20, // Y-coordinate percentage
      w: 30, // Width percentage
      h: 5,  // Height percentage
      color: "rgba(255, 255, 0, 0.4)" // Optional background color
    }
  ];

  const handleDocumentLoadSuccess = (pages) => {
    setNumPages(pages);
  };

  const handleScrollToHighlight = () => {
    if (viewerRef.current && highlights.length > 0) {
      // Programmatically scroll the viewer to the first highlight
      viewerRef.current.scrollToHighlight(highlights[0]);
    }
  };

  return (
    <div>
      <button onClick={handleScrollToHighlight}>Scroll to Highlight</button>
      <div style={{ height: '800px' }}>
        <ReactRenderPdfLite
           ref={viewerRef}
           file="path/to/your/document.pdf" // or a File object
           highlights={highlights}
           onLoadSuccess={handleDocumentLoadSuccess}
           viewerWidth={800}
           backgroundColor="#1e1e1e"
        />
      </div>
    </div>
  );
};

export default MyPdfViewer;

Props

The ReactRenderPdfLite component accepts the following props:

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | file | string \| File | Required | The PDF file to load. Can be a URL string or a File object. | | highlights | Highlight[] | [] | Array of highlights to render over the PDF. | | onLoadSuccess | (numPages: number) => void | undefined | Callback invoked when the document is successfully loaded. Receives the total number of pages. | | viewerWidth | number | 700 | Width of the PDF viewer in pixels. | | backgroundColor | string | "#202124" | Background color of the viewer container. |

Highlight Object

The Highlight object represents a highlighted area on a specific page of the PDF.

| Property | Type | Description | | :--- | :--- | :--- | | pageIndex | number | Required. 0-indexed page number where the highlight applies. | | x | number | Required. X-coordinate of the highlight (as a percentage from 0 to 100). | | y | number | Required. Y-coordinate of the highlight (as a percentage from 0 to 100). | | w | number | Required. Width of the highlight (as a percentage from 0 to 100). | | h | number | Required. Height of the highlight (as a percentage from 0 to 100). | | color | string | Optional background color for the highlight (e.g., 'rgba(255, 255, 0, 0.4)'). |

Methods (via Ref)

You can access methods on the component by passing a ref (as shown in the usage example).

| Method | Description | | :--- | :--- | | scrollToHighlight(highlight: Highlight) | Scrolls the virtualized list to the specified highlight on its respective page. The highlight will blink briefly to indicate the target. |

License

ISC