@tesseract/react-file-viewer

A React-based client-side file viewer supporting documents, spreadsheets, PDFs, images, text files, audio, and video.

Features

- View Office documents (.docx, .xlsx)
- Display PDFs using react-pdf
- Render images (.png, .jpg, .gif, etc.)
- Play audio and video files
- Simple and lightweight
- Client-side only (no server required)

Installation

``sh
npm install @tesseract/react-file-viewer
`

or

`sh
yarn add @tesseract/react-file-viewer
`

Usage

`tsx
import React, { useState } from "react";
import SheetViewer from "@tesseract/react-client-file-viewer/components/viewers/SheetViewer";
import DocumentViewer from "@tesseract/react-client-file-viewer/components/viewers/DocumentViewer";
import ImageViewer from "@tesseract/react-client-file-viewer/components/viewers/ImageViewer";
import TextViewer from "@tesseract/react-client-file-viewer/components/viewers/TextViewer";
import PortableDocumentViewer from "@tesseract/react-client-file-viewer/components/viewers/PortableDocumentViewer";
import AudioViewer from "@tesseract/react-client-file-viewer/components/viewers/AudioViewer";
import VideoViewer from "@tesseract/react-client-file-viewer/components/viewers/VideoViewer";
import { FileTypeEnum } from "@tesseract/react-client-file-viewer/utils/enums/file-type.enum";
import { typeExtensions } from "@tesseract/react-client-file-viewer/utils/Helper";

const App: React.FC = () => {
const [file, setFile] = useState(null);
const [fileType, setFileType] = useState(null);

const handleFileChange = (event: React.ChangeEvent) => {
if (event.target.files && event.target.files.length > 0) {
const selectedFile = event.target.files[0];
const extension = selectedFile.name.split('.').pop()?.toLowerCase();

let detectedType: FileTypeEnum | null = null;
for (const [type, extensions] of Object.entries(typeExtensions)) {
if (extensions.includes(extension!)) {
detectedType = type as FileTypeEnum;
break;
}
}

if (detectedType) {
setFile(selectedFile);
setFileType(detectedType);
} else {
alert("Unsupported file type.");
setFile(null);
setFileType(null);
}
}
};

const fileExtensions = Object.values(typeExtensions).flat().map(ext => .${ext}).join(",");

return (


);
};

export default App;
`

Supported File Types

| File Type | Extensions |
|---------------|--------------------------------|
| Documents | .docx, .txt |
| Spreadsheets | .xlsx |
| PDFs | .pdf |
| Images | .png, .jpg, .gif, .bmp |
| Text | .txt, .csv |
| Audio | .mp3, .wav, .ogg |
| Video | .mp4, .webm, .ogg` |

License

MIT License

Contributing

This is trial version of document viewer.
Feel free to contribute by submitting issues or pull requests!

Author

Tesseract Team