Hive React Document Viewer

A powerful React component for viewing PDF, DOCX, and PPTX documents. Features include thumbnail navigation, text search, zoom controls, fullscreen mode, and optional OCR support for scanned documents.

Features

• 📄 PDF viewing with high-fidelity rendering
• 📑 Thumbnail sidebar with page navigation
• 🔍 Text search with match highlighting
• 🔎 Zoom controls (fit to page, zoom in/out)
• 📥 Download & Print support
• 🖥️ Fullscreen mode
• 📝 DOCX support (rendered as HTML)
• 📊 PPTX support (via PDF conversion)
• 🔤 OCR support for scanned PDFs (via Tesseract.js)
• 🎨 Customizable theming

Installation

npm install hive-react-document-viewer

Peer dependencies: react and react-dom (>=16.8.0)

Quick Start

import { DocumentViewer } from "hive-react-document-viewer";

function App() {
  return (
    <div style={{ height: "100vh" }}>
      <DocumentViewer
        src="/path/to/document.pdf"
        mimeType="application/pdf"
      />
    </div>
  );
}

Usage Examples

Basic PDF Viewer

<DocumentViewer src="https://example.com/document.pdf" />

With Options

<DocumentViewer
  src={fileUrl}
  mimeType="application/pdf"
  options={{
    showToolbar: true,
    showSidebar: true,
    sidebarMode: "thumbnails",
    resolutionScale: 2,
    zoom: 1,
  }}
/>

With Viewer API

import { DocumentViewer, PdfViewerApi } from "hive-react-document-viewer";

function App() {
  const [viewerApi, setViewerApi] = useState<PdfViewerApi | null>(null);

  return (
    <>
      <button onClick={() => viewerApi?.scrollToPage(5)}>Go to Page 5</button>
      <DocumentViewer
        src="/document.pdf"
        options={{
          onViewerReady: setViewerApi,
        }}
      />
    </>
  );
}

File Upload

function App() {
  const [file, setFile] = useState<File | null>(null);

  return (
    <>
      <input
        type="file"
        accept=".pdf,.docx,.pptx"
        onChange={(e) => setFile(e.target.files?.[0] ?? null)}
      />
      {file && <DocumentViewer src={file} />}
    </>
  );
}

Office Documents (DOCX/PPTX)

For DOCX/PPTX files, you can either render DOCX as HTML directly, or convert to PDF using a conversion endpoint:

<DocumentViewer
  src={officeFile}
  options={{
    conversionWorkerUrl: "https://your-api.com/convert",
  }}
  onConversionError={(err) => console.error("Conversion failed:", err)}
/>

Props

Prop	Type	Description
src	string | Blob | File	Document URL or file object
mimeType	string	MIME type (auto-detected if omitted)
options	ViewerOptions	Viewer configuration options
theme	ViewerTheme	Theme customization
onRetry	() => void	Retry callback (shows retry button on error)
onConversionError	(error: Error) => void	Called when Office conversion fails
className	string	Additional CSS class
style	CSSProperties	Inline styles

ViewerOptions

Option	Type	Default	Description
showToolbar	boolean	true	Show the toolbar
showSidebar	boolean	true	Show the thumbnail sidebar
sidebarMode	"none" | "thumbnails" | "outline" | "both"	"thumbnails"	Sidebar content
showSearch	boolean	true	Show search in toolbar
showPrint	boolean	true	Show print button
showFullscreen	boolean	true	Show fullscreen button
zoom	number	1	Zoom level multiplier
resolutionScale	number	1	Canvas resolution scale (higher = sharper)
enableOCR	boolean	false	Enable OCR for scanned PDFs
conversionWorkerUrl	string	-	URL for Office→PDF conversion
viewerBackgroundColor	string	#525659	Viewer background color
pageBackgroundColor	string	#ffffff	Page background color
toolbarBackgroundColor	string	-	Toolbar background color
onViewerReady	(api: PdfViewerApi) => void	-	Callback with viewer API
onDownload	(src, mime) => void	-	Custom download handler
onPrint	(src, mime) => void	-	Custom print handler
onFullscreen	(el) => void	-	Custom fullscreen handler
downloadFileName	string	-	Custom download filename

Viewer API

The onViewerReady callback provides an API to control the viewer programmatically:

interface PdfViewerApi {
  scrollToPage: (page: number) => void;
  nextMatch: () => void;
  prevMatch: () => void;
}

Exports

import {
  DocumentViewer,
  PdfToolbar,
  registerRenderer,
  getRenderer,
  listRenderers,
  type PdfViewerApi,
  type PdfToolbarProps,
  type ViewerOptions,
  type ViewerTheme,
} from "hive-react-document-viewer";

PDF.js Worker Setup

For optimal PDF rendering, serve the bundled PDF.js worker at /pdf.worker.js:

# Copy from node_modules after install
cp node_modules/hive-react-document-viewer/dist/pdf.worker.js public/pdf.worker.js

The package runs a postinstall script that patches PDF.js for better image quality.

Conversion Worker

For DOCX/PPTX files, provide a conversion endpoint that accepts:

• Request: POST with multipart/form-data, field file
• Response: Either raw PDF bytes (Content-Type: application/pdf) or JSON { "url": "..." }

Theming

<DocumentViewer
  src={file}
  theme={{
    primary: "#1a1a2e",
    textPrimary: "#ffffff",
  }}
/>

CSS Classes

Style the viewer using these CSS classes:

• .document-viewer - Main container
• .document-viewer-loading - Loading state
• .document-viewer-error - Error state
• .document-viewer-search-hit - Search match highlight
• .document-viewer-search-hit-active - Active search match

Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge

License

MIT