React component for viewing documents: alternatives to Google Docs Viewer?

Other Questions Google docs
1

Hey everyone! I’m having some trouble with a document viewer in my React app. I tried using the ‘react-google-docs-viewer’ package, but it’s not working as expected. Here’s what I’ve tried:

<DocumentViewer
  dimensions={{width: '600px', height: '780px'}}
  fileSource='sample-document.pdf'
/>

The viewer just won’t show up in my app. Do I need to set up any special authentication? Or maybe there’s a better library out there for React 18.2 that can handle images, files, and videos? I’d really appreciate any suggestions or alternatives you might have. Thanks in advance for your help!

2

I’ve had success using react-file-viewer for handling various document types in React applications. It’s versatile and can display PDFs, images, videos, and more. Here’s a basic example:

import FileViewer from 'react-file-viewer';

const MyComponent = () => (
  <FileViewer
    fileType="pdf"
    filePath="/path/to/document.pdf"
    onError={(e) => console.log(e)}
  />
);

This library is actively maintained and works well with React 18.2. It doesn’t require Google authentication, which simplifies implementation. Just ensure you have the correct file paths and types set up. For more complex scenarios, you might need to create a wrapper component to handle different file types dynamically.

3

hey ryan, have u tried PDF.js? it’s pretty solid for pdf viewing in react. no google auth hassle. for images n vids, maybe look into react-player. just make sure ur file paths r correct. good luck with ur project!

4

I’ve faced similar challenges with document viewers in React. One solution that worked well for me was using react-pdf. It’s lightweight, customizable, and doesn’t require external authentication. Here’s a basic implementation:

import { Document, Page } from 'react-pdf';

function MyApp() {
  return (
    <Document file="/path/to/file.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}

For handling multiple file types, I’d suggest creating a custom component that conditionally renders different viewers based on the file extension. This approach gives you more control and flexibility.

As for videos and images, react-player and react-image are solid choices. They integrate smoothly with React and offer good performance.

Remember to handle loading states and errors for a better user experience. Hope this helps!