brillout / brillout/awesome-react-components
Add File Viewer — React file preview component for Office / PDF / CAD / archives
- 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
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