​
Overview

The DocumentViewer provides a unified interface for viewing different document types including PDFs, FHIR resources, and other structured data formats. It automatically detects the document type and renders it appropriately.

​
Basic Usage

import { DocumentViewer } from "@samplehc/ui/components";

function UniversalDocumentViewer({ documentId }) {
  return (
    <DocumentViewer
      documentId={documentId}
      onDocumentLoad={(metadata) => {
        console.log("Document loaded:", metadata);
      }}
    />
  );
}

​
API Reference

​
DocumentViewerProps

​
documentId
string
required

ID of the document to display. The viewer will auto-detect the document type.

​
onDocumentLoad
function

Callback fired when the document finishes loading.

​
readOnly
boolean

Make the document read-only (no interactions). Defaults to false.

​
Supported Formats

  • PDF Documents: Interactive PDF viewing with text selection
  • FHIR Resources: Structured display of FHIR data
  • Medical Images: Basic image viewing capabilities
  • Text Documents: Plain text and formatted text display

​
Features

  • Auto-detection: Automatically determines document type
  • Responsive: Adapts to different screen sizes
  • Loading States: Provides feedback during document loading
  • Error Handling: Graceful handling of unsupported formats

​
Integration Example

import { DocumentViewer } from "@samplehc/ui/components";
import { useDocumentMetadata } from "@samplehc/ui/lib";

function SmartDocumentViewer({ documentId }) {
  const { data: metadata, isLoading } = useDocumentMetadata(documentId);

  if (isLoading) {
    return <div>Loading document...</div>;
  }

  return (
    <div className="h-full">
      <h2>{metadata?.fileName}</h2>
      <DocumentViewer documentId={documentId} />
    </div>
  );
}