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

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

Supported file formats:

- Images: png, jpeg, gif
- pdf
- docx
- xlsx
- pptx
- 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.

`tsx
import React, { Component } from 'react'

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

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

$3


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:

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

License

MIT © javier-mora