PDF Viewer

Overview

The PdfViewer component provides a full-featured PDF viewing experience with support for annotations, highlighting, and navigation. It’s designed specifically for healthcare document review workflows.

Basic Usage

import { PdfViewer } from "@samplehc/ui/components";
import { useRef } from "react";

function DocumentViewer({ documentUrl }) {
  const viewerRef = useRef();

  return (
    <PdfViewer
      pdfViewerRef={viewerRef}
      url={documentUrl}
      onPageClick={(pageNumber) => {
        console.log("Page clicked:", pageNumber);
      }}
      renderTextLayer={true}
      renderAnnotationLayer={true}
    />
  );
}

API Reference

PdfViewerProps

string

required

URL of the PDF document to display.

string

Optional identifier for the PDF viewer instance, used for local storage of preferences.

PdfHighlight[]

Array of highlight objects to display on the PDF pages.

Ref<PdfViewerHandle>

Ref to access the PDF viewer handle methods.

function

Callback fired when a PDF page is clicked.

onPageClick?: (pageNumber: number) => void

number

The currently selected page number (1-indexed).

boolean

Whether to render PDF annotation layer. Defaults to true.

boolean

Whether to render PDF text layer for text selection. Defaults to true.

SplitterOptions

Options to configure page splitters for document processing workflows.

PdfViewerHandle

function

Navigate to a specific page number by scrolling to it.

scrollToPage: (pageNumber: number) => void

PdfHighlight

number

required

The page number (1-indexed) where the highlight appears.

number

required

Left position as a percentage of page width (0-1).

number

required

Top position as a percentage of page height (0-1).

number

required

Width as a percentage of page width (0-1).

number

required

Height as a percentage of page height (0-1).

'yellow' | 'blue'

Highlight color. Defaults to yellow.

SplitterOptions

boolean

Hide the page number text below the splitter.

function

Callback function when a splitter is clicked.

onSelect?: (pageNumber: number) => void

number[]

Array of page numbers after which the splitter is selected.

Features

Page Navigation: Navigate through PDF pages with controls and virtualized scrolling
Zoom Controls: Zoom in/out with automatic fit-to-width calculation
Highlights: Overlay custom highlights on PDF pages with configurable colors
Page Rotation: Rotate individual pages clockwise or counterclockwise
Grid View: Switch between standard scroll view and grid thumbnail view
Page Splitters: Add interactive splitters between pages for document processing
Responsive: Adapts to container width with automatic scaling
Performance: Virtualized rendering for smooth scrolling of large documents

Integration with Workflow

import { PdfViewer } from "@samplehc/ui/components";
import { useTaskState } from "@samplehc/ui/data";
import { useRef } from "react";

function ReviewDocument({ documentUrl }) {
  const [highlights, setHighlights] = useTaskState("pdfHighlights", []);
  const [selectedPage, setSelectedPage] = useTaskState("selectedPage", 1);
  const viewerRef = useRef();

  return (
    <PdfViewer
      url={documentUrl}
      pdfViewerRef={viewerRef}
      highlights={highlights}
      selectedPage={selectedPage}
      onPageClick={setSelectedPage}
      renderTextLayer={true}
      renderAnnotationLayer={true}
    />
  );
}

Advanced Examples

Document Review with Highlights

import { PdfViewer } from "@samplehc/ui/components";
import { useTaskState } from "@samplehc/ui/data";
import { Button } from "@/components/ui/button";
import { useRef } from "react";

function DocumentReviewScreen({ documentUrl }) {
  const [highlights, setHighlights] = useTaskState("highlights", []);
  const [selectedPage, setSelectedPage] = useTaskState("currentPage", 1);
  const viewerRef = useRef();

  const addHighlight = (pageNumber, region) => {
    const newHighlight = {
      pageNumber,
      left: region.left,
      top: region.top,
      width: region.width,
      height: region.height,
      color: "yellow"
    };
    setHighlights([...highlights, newHighlight]);
  };

  const goToNextPage = () => {
    viewerRef.current?.scrollToPage(selectedPage + 1);
  };

  return (
    <div className="flex h-full">
      <div className="flex-1">
        <PdfViewer
          url={documentUrl}
          pdfViewerRef={viewerRef}
          highlights={highlights}
          selectedPage={selectedPage}
          onPageClick={setSelectedPage}
          renderTextLayer={true}
          renderAnnotationLayer={false}
        />
      </div>
      <div className="w-64 p-4 border-l">
        <h3 className="font-semibold mb-4">Review Tools</h3>
        <Button onClick={goToNextPage} className="mb-2">
          Next Page
        </Button>
        <div className="text-sm">
          Current Page: {selectedPage}
        </div>
        <div className="text-sm">
          Highlights: {highlights.length}
        </div>
      </div>
    </div>
  );
}

Document Splitting with Page Splitters

import { PdfViewer } from "@samplehc/ui/components";
import { useTaskState } from "@samplehc/ui/data";
import { Button } from "@/components/ui/button";

function DocumentSplittingScreen({ documentUrl }) {
  const [selectedSplits, setSelectedSplits] = useTaskState("splits", []);
  const [selectedPage, setSelectedPage] = useTaskState("currentPage", 1);

  const splitterOptions = {
    hidePageNumber: false,
    selectedSplits,
    onSelect: (pageNumber) => {
      setSelectedSplits(prev => 
        prev.includes(pageNumber)
          ? prev.filter(p => p !== pageNumber)
          : [...prev, pageNumber]
      );
    }
  };

  const processSplits = () => {
    console.log("Processing document splits:", selectedSplits);
    // Handle document splitting logic
  };

  return (
    <div className="h-full flex flex-col">
      <div className="p-4 border-b">
        <div className="flex justify-between items-center">
          <h2 className="text-lg font-semibold">Split Document</h2>
          <Button onClick={processSplits} disabled={selectedSplits.length === 0}>
            Create {selectedSplits.length} Documents
          </Button>
        </div>
      </div>
      <div className="flex-1">
        <PdfViewer
          url={documentUrl}
          selectedPage={selectedPage}
          onPageClick={setSelectedPage}
          splitterOptions={splitterOptions}
          renderTextLayer={false}
          renderAnnotationLayer={false}
        />
      </div>
    </div>
  );
}

Workflows

Screens

Integrations

Other guides

Overview

Basic Usage

API Reference

PdfViewerProps

PdfViewerHandle

PdfHighlight

SplitterOptions

Features

Integration with Workflow

Advanced Examples

Document Review with Highlights

Document Splitting with Page Splitters

​Overview

​Basic Usage

​API Reference

​PdfViewerProps

​PdfViewerHandle

​PdfHighlight

​SplitterOptions

​Features

​Integration with Workflow

​Advanced Examples

​Document Review with Highlights

​Document Splitting with Page Splitters

Overview

Basic Usage

API Reference

PdfViewerProps

PdfViewerHandle

PdfHighlight

SplitterOptions

Features

Integration with Workflow

Advanced Examples

Document Review with Highlights

Document Splitting with Page Splitters