brillout / brillout/awesome-react-components

Add File Viewer — React file preview component for Office / PDF / CAD / archives

Open Beginner friendly
#603 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
48.4k
Forks
3.8k
PR merge metrics
No merged PRs in 30d

Description

Suggesting **File Viewer** for the React components list, likely under a viewer / document / miscellaneous UI component category.

## File Viewer

**GitHub:** https://github.com/flyfish-dev/file-viewer
**Website:** https://file-viewer.app
**Demo:** https://demo.file-viewer.app
**Docs:** https://doc.file-viewer.app
**npm:** https://www.npmjs.com/package/@file-viewer/react-full

### What it is

File Viewer is a browser-native file preview component ecosystem. The React package lets internal tools and enterprise web apps preview user-uploaded attachments without requiring a server-side conversion service.

It is useful for admin panels, knowledge bases, ticketing systems, document archives, intranet portals, and engineering collaboration tools where users need to preview Office documents, PDF/OFD, CAD drawings, archives, email files, images, media, code, Markdown, diagrams, PSD, and other business files.

### React integration

```bash
npm i @file-viewer/react-full
```

```tsx
import FileViewer from '@file-viewer/react-full'

export function Preview() {
return
}
```

### Features

- React 18/19 package, plus a React Legacy package for React 16.8/17 projects.
- Framework-agnostic core with React, Vue, Web Component, Svelte, jQuery, Vanilla JS, preset, and full-package entry points.
- Browser-side preview flow that avoids sending private files to an external conversion service.
- Lazy-loaded renderers for heavier formats such as PDF, Office, CAD, Typst, archives, and diagrams.
- Self-hostable worker/wasm/vendor assets for intranet, offline, and private CDN deployments.
- Unified options/events/controller surface for theme, toolbar, search, zoom, print, download, watermark, lifecycle hooks, and more.

### License

Apache-2.0

Thanks for considering it.

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the existing React component list and its category conventions, then verify the File Viewer links and package details provided in the issue. Done means adding an entry for File Viewer in the appropriate viewer, document, or miscellaneous category with accurate project information.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
content
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.