​
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({ documentId }) {
  const viewerRef = useRef();

  return (
    <PdfViewer
      ref={viewerRef}
      documentId={documentId}
      onPageChange={(pageNumber) => {
        console.log("Current page:", pageNumber);
      }}
      onAnnotationCreate={(annotation) => {
        console.log("New annotation:", annotation);
      }}
    />
  );
}

​
API Reference

​
PdfViewerProps

​
documentId
string
required

ID of the document to display. The viewer will fetch the document URL automatically.

​
onPageChange
function

Callback fired when the user navigates to a different page.

​
onAnnotationCreate
function

Callback fired when the user creates a new annotation.

​
PdfViewerHandle

​
currentPage
number

Currently displayed page number.

​
totalPages
number

Total number of pages in the document.

​
goToPage
function

Navigate to a specific page number.

​
Features

  • Page Navigation: Navigate through PDF pages with controls
  • Zoom Controls: Zoom in/out and fit-to-width options
  • Text Selection: Select and copy text from PDFs
  • Annotations: Create highlights and notes on PDF content
  • Search: Find text within the document
  • Responsive: Works on mobile and desktop devices

​
Integration with Workflow

import { PdfViewer } from "@samplehc/ui/components";
import { useTaskState } from "@samplehc/ui/lib";

function ReviewDocument({ documentId }) {
  const [annotations, setAnnotations] = useTaskState("annotations", []);

  return (
    <PdfViewer
      documentId={documentId}
      onAnnotationCreate={(annotation) => {
        setAnnotations([...annotations, annotation]);
      }}
    />
  );
}