2

Requirement: I want a react document viewer for all kinds of file types (PDF, Images, Word, Video), same as slack has a Document Viewer.

Like Slack, I am building a chat module for my react web app. In which users can upload multiple attachments (PDF, word, png, jpeg etc). I want to create a document viewer for all kinds of files similar to slack.

I googled it and came across one package - react-file-viewer But this npm package is not updated for the last 3 years. I came across an article in which the person said it is not going to work for React 18 Article

Does anyone have a suggestion on this? Do I need to create my custom Viewer which uses multiple packages (Image viewer for image, npm react player for video, pdf viewer for PDF files so on ..) or is there any react npm package already present which provides the similar solution like react-file-viewer

Tanuj Gupta
  • 286
  • 5
  • 20

1 Answers1

0

use Google Docs Viewer. it's more stable than react-file-viewer. here's two ways to deal with this:

  1. use Google Docs Viewer with its javascript API. trigger the viewer API when the component is mounted.
  2. use plain <iframe /> to embed the google docs viewer.
<iframe src="https://docs.google.com/viewer?url=http://example.com/my_file.txt&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

please refer to this gist for <iframe /> usage of Google Docs Viewer.

sungryeol
  • 3,677
  • 7
  • 20