Unified File Preview in React: One Component for All Formats

Every app that handles files eventually faces the same dilemma: users upload PDFs, spreadsheets, logs, images, and code, and suddenly the "preview this file" button becomes a patchwork of half-baked solutions. A React component from @smazeeapps/file-viewer aims to simplify this chaos by packing dozens of file types into a single, unified viewer.

The fragmentation problem every team recognizes

Most products don’t set out to build a file platform. They start with one small use case—a client portal that previews proposals, a support tool that inspects CSVs, or an internal dashboard where employees open JSON logs, markdown notes, and screenshots in the same workflow. At first, the task seems straightforward.

Then the formats multiply. The UI splinters. Search works in one viewer but not another. Code previews feel disconnected from office files. Every new format adds another branch in the logic, another edge case in the interface, and another inconsistency that users notice immediately.

This is where the single-viewer approach shifts from convenience to necessity. It becomes a product decision that shapes the entire user experience.

A single React component with broad capabilities

The integration surface is intentionally minimal. Install the package with a one-liner:

npm install @smazeeapps/file-viewer react react-dom

Then drop the FileViewer component into any React app. Pass it the file source and filename, and the component handles the rest:

import { FileViewer } from "@smazeeapps/file-viewer";

export function PreviewPanel() {
  return (
    <FileViewer
      src="
      fileName="report.pdf"
      height="800px"
      theme="light"
    />
  );
}

The viewer detects the file type, loads the appropriate renderer, and keeps the experience consistent within your product’s interface. For teams building real applications, this consistency is difficult to overvalue.

Consistency isn’t just about looks—it’s about behavior

The biggest win isn’t just the number of supported formats. It’s the unified mental model behind them:

• A single FileViewer API that works across every file type
• One consistent embedding pattern in your application
• A single search interface accessible via Ctrl+F or Cmd+F
• One theming system for light or dark mode
• One place to preview documents, text, code, data, and images

This turns the viewer from a bundle of unrelated components into a cohesive file experience layer for React apps. Users stop noticing the tool and start focusing on the content.

Search that works the way users expect

In most workflows, opening a file isn’t a browsing exercise—it’s a targeted search. A phrase in a contract, a value in a JSON payload, a function in a code file, or a specific line in a markdown note. The built-in search support addresses this directly.

Keyboard shortcuts (Ctrl+F/Cmd+F) integrate naturally with browser-based workflows. Product teams can also drive search programmatically using the searchMode prop, which fits global search experiences, guided review flows, and workflow-driven inspection tools.

This small feature transforms the component from a passive renderer into an active participant in how users work through files.

Selection data unlocks advanced workflows

Many preview components stop at "show the file." This one goes further by exposing structured data about user selections. With the onTextSelect callback, parent applications receive real-time information about what the user highlights inside the viewer.

This unlocks a range of advanced use cases:

• Review workflows with annotated feedback
• Citation and reference extraction
• Support investigation tools that capture context
• Document intelligence experiences that analyze selections
• Internal audit and compliance flows that log interactions

Here’s how it works in practice:

<FileViewer
  src={file}
  fileName={file.name}
  fileId={`sample:${file.name}`}
  onTextSelect={(payload) => {
    console.log(payload);
  }}
/>

The returned payload includes the selected text, file name, file ID, page number, and line number—structured data that can power downstream features.

Images deserve the same seamless treatment

Image support is often an afterthought, but real workflows never separate formats cleanly. A team might review a DOCX file, then a screenshot, then a CSV, then a markdown note, then an SVG asset. If images open in a completely different experience, the product starts feeling fragmented again.

This viewer handles common image formats—png, jpg, jpeg, gif, webp, svg, bmp, and ico—within the same flow as other file types. The result is a product that stays whole, regardless of what users upload.

The bigger picture: a file experience layer, not a set of viewers

The "single viewer for all files" promise isn’t just about reducing code duplication. It’s about creating a cohesive experience that matches how users actually work. Instead of treating each file type as a special case, this component treats them as variations of the same fundamental task: making content accessible and actionable.

For product teams tired of maintaining a patchwork of previews, this approach offers a cleaner codebase, a more consistent interface, and a better experience for users who just want to get their work done.

The future of file handling in React apps may not be endless custom viewers—it might just be one component that does it all.