@doc-preview/react

React component for multi-format document preview, built on @doc-preview/core. Same viewer as Angular and vanilla JS — PDF, DOCX, images, optional Office pack, and Enterprise annotations, watermark, split view, print, search, redaction, and diff.

Current release: 1.1.2 — Depends on @doc-preview/core ^1.1.2. See monorepo CHANGELOG.

Repository & docs: github.com/rajkishorsahu89/doc-preview

Demo: doc-preview-app.vercel.app — tool · demo · guide

Ships as ESM with TypeScript declarations. Works with React 18 and 19. Import @doc-preview/themes CSS once in your app.

Keywords: doc-preview react document-viewer pdf docx file-preview annotations

Install

npm install @doc-preview/react @doc-preview/themes
# Adds @doc-preview/core automatically.
# Peer deps: react ^18 || ^19, react-dom ^18 || ^19.
# Optional:
npm install @doc-preview/enterprise @doc-preview/office

Supported file types

Same engine as Angular — install @doc-preview/office and call registerOfficePreviewRenderers() for spreadsheet, deck, legacy Office, and cloud URL formats.

| Category | Extensions | Package | | --- | --- | --- | | PDF | .pdf | core | | Images | .png, .jpg, .jpeg, .gif, .webp, .bmp, .svg, .tif, .tiff | core | | Word | .docx, .docm, .dotx | core | | Word (legacy) | .doc | office | | Excel | .xlsx, .xlsm, .xltx, .xls, .ods | office | | PowerPoint | .pptx, .pptm, .potx, .ppt, .odp | office | | OpenDocument text | .odt | office | | CSV / TSV | .csv, .tsv | core | | Text & data | .txt, .md, .log, .json, .xml | core | | HTML | .html, .htm | core | | Video / audio | .mp4, .webm, .mov, .mp3, .wav, .m4a | core | | Cloud embed (public URL) | .doc, .ppt, .pptx, .xlsx, .pdf, .odt, .ods, .odp | office |

Upload accept: .pdf,.doc,.docx,.docm,.dotx,.odt,.ods,.odp,.xls,.xlsx,.xlsm,.xltx,.ppt,.pptx,.pptm,.potx,.png,.jpg,.jpeg,.gif,.webp,.bmp,.svg,.tif,.tiff,.mp4,.webm,.mov,.mp3,.wav,.m4a,.txt,.md,.html,.htm,.csv,.tsv,.json,.xml,.log

Usage — component

import { DocPreview } from "@doc-preview/react";
import "@doc-preview/themes/doc-preview.css";

export function Viewer() {
  return (
    <DocPreview
      documents={[{ uri: "/sample.pdf", fileName: "sample.pdf" }]}
      onPhaseChange={(e) => console.log(e.phase)}
    />
  );
}

Usage — upload & Blob

import { DocPreview } from "@doc-preview/react";
import { createPreviewDocumentsFromFiles } from "@doc-preview/core";

<DocPreview
  documents={docs}
  config={{ upload: { enabled: true, accept: ".pdf,.png,.docx" } }}
  onFilesSelected={(files) => setDocs(createPreviewDocumentsFromFiles(files))}
/>

Usage — Enterprise

<DocPreview
  documents={docs}
  enterpriseLicenseKey="DP-ENT-DEMO-0001-ANNOTATIONS-SPLIT"
  config={{
    enterprise: {
      watermarkText: "CONFIDENTIAL",
      enableAnnotations: true,
      enablePrint: true,
      splitView: true
    }
  }}
  onEnterpriseStatusChange={(licensed) => console.log(licensed)}
/>

Usage — Office pack

import { registerBuiltinPreviewRenderers } from "@doc-preview/core";
import { registerOfficePreviewRenderers } from "@doc-preview/office";

registerBuiltinPreviewRenderers();
registerOfficePreviewRenderers();

API — DocPreview props

Extends PreviewHostOptions from core plus:

| Prop | Type | Description | | --- | --- | --- | | documents | PreviewDocument[] | Required. | | config | PreviewConfig | Upload, PDF, enterprise, office options. | | enterpriseLicenseKey | string | Enterprise licence key. | | dark | boolean | Dark theme. | | theme | PreviewThemeTokens | CSS token overrides. | | slots | PreviewSlots | Header slot overrides. | | className / style | — | Host wrapper styling. | | onPhaseChange | (event) => void | Loading / error phases. | | onDocumentChange | (doc, index) => void | Active document changed. | | onFilesSelected | (files) => void | Built-in upload picker. | | onEnterpriseStatusChange | (licensed) => void | Licence status. |

Re-exports all public symbols from @doc-preview/core.

React vs Angular naming

| React | Angular | | --- | --- | | <DocPreview /> | <doc-preview> | | onPhaseChange | (phaseChange) | | onFilesSelected | (filesSelected) |

Related packages

• @doc-preview/core
• @doc-preview/angular
• @doc-preview/js
• @doc-preview/themes
• @doc-preview/enterprise
• @doc-preview/office

License

MIT