react-file-viewer-v2

Extendable file viewer for web

react-file-viewer-v2 is a small package for viewing files on the web inspired by react-file-viewer

Install

npm install --save react-file-viewer-v2

Supported file formats:

Images: png, jpeg, gif
pdf
docx
xlsx
Video: mp4, webm
Audio: mp3

Usage

There is one main React component, FileViewer, that takes the following props:

fileType string: type of resource to be shown (one of the supported file formats, eg 'png'). Passing in an unsupported file type will result in displaying an unsupported file type message (or a custom component).

file blob: Blob of the resource to be shown by the FileViewer.

unsupportedComponent react element [optional]: A component to render in case the file format is not supported.

import React, { Component } from 'react'

import { FileViewer } from 'react-file-viewer-v2'

class Example extends Component {
  render() {
    return <FileViewer
      file={pdf}
      fileType="pdf"
    />
  }
}

Problems with react 17

If you are on React v17, you may receive an error like below: Module not found: Error: Can't resolve 'react/jsx-runtime' in '\node_modules\react-file-viewer-v2\dist\components\FileViewer' Did you mean 'jsx-runtime.js'? You can resolve this by modifying your webpack config as below:

config.resolve.alias= {
  ...config.resolve.alias,
  "react/jsx-dev-runtime": "react/jsx-dev-runtime.js",
  "react/jsx-runtime": "react/jsx-runtime.js"
}