react-file-viewer

Install the latest version for React 16+ using npm. If you are using a version of React older than 16, you must install version 0.5.0 specifically.

# For React 16+
npm install react-file-viewer

# For React < 16
npm install react-file-viewer@0.5.0

To add support for a new file type (e.g., .rtf), you must create a 'driver' component and register it within the library's core logic:

1. Create a driver component (a component capable of rendering that file type).
2. Add the driver component to src/components/drivers.
3. Import the new component into file-viewer.jsx.
4. Add a new case to the getDriver method in file-viewer.jsx to return your component.

// Inside file-viewer.jsx -> getDriver method
case 'rtf':
  return RtfViewer;

The FileViewer component is the primary interface for displaying files. It requires fileType and filePath props. You can also provide custom components for error states or unsupported file types, and an onError callback for error handling.

import React, { Component } from 'react';
import FileViewer from 'react-file-viewer';
import { CustomErrorComponent } from 'custom-error';

const file = 'http://example.com/image.png';
const type = 'png';

class MyComponent extends Component {
  render() {
    return (
      <FileViewer
        fileType={type}
        filePath={file}
        errorComponent={CustomErrorComponent}
        onError={this.onError}/>
    );
  }

  onError(e) {
    // Handle error (e.g., logging)
    console.error(e);
  }
}

The following props are available for the FileViewer component:

fileType (string): type of resource to be shown (e.g., 'png', 'pdf', 'mp4').
filePath (string): the url of the resource to be shown.
errorComponent (react element, optional): A component to render in case of error instead of the default.
errorComponent (function, optional): onError callback function called when there is an error fetching or rendering.
unsupportedComponent (react element, optional): A component to render in case the file format is not supported.

The following file formats are supported out of the box:

Images: png, jpeg, gif, bmp (including 360-degree images)
PDF: pdf
Data: csv, xlsx, docx
Video: mp4, webm
Audio: mp3

The react-file-viewer package exports the main FileViewer component as its primary entry point. You can import it directly from the package root.

const FileViewer = require('react-file-viewer');
// or if using ES modules in your environment:
// import FileViewer from 'react-file-viewer';

The FileViewer component accepts the following props:

The FileViewer component supports the following fileType values:

• Documents: pdf, docx, csv, xlsx (Excel)
• Images: jpg, jpeg, gif, bmp, png
• Audio: mp3
• Video: webm, mp4
• BIM: wexbim

If a fileType is provided that does not match these, the unsupportedComponent (if provided) or the UnsupportedViewer will be rendered.