PDF and Document Rendering in React: react-doc-viewer vs react-file-viewer vs react-pdf

When you need to show documents inside a React app—whether it’s a PDF invoice, a Word report, or a PowerPoint deck—you’ll quickly realize browsers don’t natively support most office formats. That’s where libraries like react-doc-viewer, react-file-viewer, and react-pdf come in. But they solve the problem in very different ways, with major implications for security, maintainability, and user experience.

⚠️ Maintenance Status: One Is Officially Deprecated

Before diving into features, check the health of the project:

• react-file-viewer is deprecated. Its npm page and GitHub README clearly state: “This library is no longer maintained.” It hasn’t seen meaningful updates since 2019 and uses legacy React patterns (createClass, PropTypes from prop-types without modern context). Do not use it in new projects.

• react-doc-viewer and react-pdf are both actively maintained as of 2024, with recent releases and responsive issue tracking.

This alone eliminates react-file-viewer from serious consideration unless you’re maintaining old code.

📄 Core Capabilities: What File Types Can Each Render?

react-pdf: PDF Only, But Done Right

react-pdf focuses exclusively on PDFs using Mozilla’s battle-tested PDF.js. It renders entirely in the browser—no iframes, no external services.

// react-pdf: Client-side PDF rendering
import { Document, Page } from 'react-pdf';

function PDFViewer({ fileUrl }) {
  return (
    <Document file={fileUrl}>
      <Page pageNumber={1} />
      <Page pageNumber={2} />
    </Document>
  );
}

You get full control: lazy-load pages, handle loading states, customize scale, and even extract text.

react-doc-viewer: Multi-Format via Third-Party Embeds

react-doc-viewer supports PDF, DOCX, XLSX, PPTX, TXT, and images—but not all client-side. For non-PDF files, it falls back to embedding Google Docs Viewer or Microsoft Office Online in an <iframe>.

// react-doc-viewer: Unified API, mixed rendering strategies
import DocViewer, { DocViewerRenderers } from 'react-doc-viewer';

const docs = [{ uri: "/report.docx", fileType: "docx" }];

function DocumentViewer() {
  return (
    <DocViewer
      documents={docs}
      pluginRenderers={DocViewerRenderers}
    />
  );
}

For PDFs, it uses react-pdf under the hood. For .docx, it loads https://docs.google.com/gview?url=...&embedded=true in an iframe. This means:

• Requires internet access
• Your document URL must be publicly accessible (or configured for CORS)
• You’re dependent on Google/Microsoft uptime and policies

react-file-viewer: Deprecated Multi-Format Attempt

Historically, react-file-viewer tried to render multiple formats using various client-side parsers (e.g., mammoth for DOCX, pdfjs-dist for PDFs). But due to lack of maintenance, many dependencies are outdated and insecure.

// react-file-viewer (deprecated — do not use)
import FileViewer from 'react-file-viewer';

// This may break in modern React apps
<FileViewer fileType="docx" filePath="/report.docx" />

It never handled complex formats reliably, and today it’s incompatible with React 18+ in strict mode.

🔒 Security and Deployment Constraints

react-pdf: Safe for Sensitive Data

Since everything runs in-browser, you can serve PDFs from private, authenticated endpoints. No data leaves your user’s machine.

// Works with private URLs (e.g., behind auth)
<Document file={{ url: '/api/documents/secret.pdf', httpHeaders: { Authorization: 'Bearer ...' } }} />

react-doc-viewer: Public URLs Required for Non-PDF

Google Docs Viewer cannot access private or localhost URLs. Your .docx file must be publicly reachable so Google’s servers can fetch it. This is a dealbreaker for internal apps or confidential documents.

// ❌ Fails if /report.docx requires authentication
const docs = [{ uri: "/report.docx", fileType: "docx" }]; // Will show blank or error in iframe

Workarounds involve pre-converting files to PDF on the backend—which defeats the purpose of using a multi-format viewer.

react-file-viewer: Unmaintained = Risky

Outdated dependencies (like old versions of pdfjs-dist) may contain unpatched vulnerabilities. Not suitable for production.

🎛️ Customization and User Experience

react-pdf: Full Control Over UI

You build the viewer UI yourself—pagination, zoom buttons, thumbnails. This gives pixel-perfect control but requires more work.

// Example: Custom zoom control
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

function CustomPDFViewer({ file }) {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}

react-doc-viewer: Opinionated, Limited Customization

It provides a built-in toolbar and layout, but customization options are minimal. You can’t easily change colors, add annotations, or override the iframe behavior for non-PDF files.

react-file-viewer: No Meaningful Customization Today

Even if it worked, its theming system is based on legacy CSS modules and doesn’t integrate well with modern styling solutions like Tailwind or CSS-in-JS.

🧪 Error Handling and Loading States

react-pdf: Explicit and Reliable

Offers callbacks for loading, success, and error states per page or document.

<Document
  file={file}
  loading={<div>Loading PDF...</div>}
  error={<div>Failed to load PDF</div>}
  noData={<div>No PDF provided</div>}
/>

react-doc-viewer: Basic Error Handling

Provides an onError callback, but iframe-based renderers often fail silently (e.g., Google Docs returns a blank page instead of an error).

<DocViewer
  documents={docs}
  onError={(error) => console.error('DocViewer error:', error)}
/>

react-file-viewer: Unreliable Error Reporting

Error props exist but often don’t fire due to unhandled promise rejections in outdated dependencies.

✅ When to Use Which

💡 Final Recommendation

• For PDF-only needs: react-pdf is the clear winner—secure, customizable, and actively maintained.
• For occasional multi-format viewing of public files: react-doc-viewer offers convenience at the cost of third-party dependency.
• Never start a new project with react-file-viewer—its deprecation notice exists for good reason.

If your app handles sensitive documents, invest in server-side conversion to PDF and use react-pdf. It’s more work upfront but pays off in security, reliability, and long-term maintainability.