Extendable file viewer for web
npm install 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
``bash`
npm install --save react-file-viewer-v2
- Images: png, jpeg, gif
- pdf
- docx
- xlsx
- pptx
- Video: mp4, webm
- Audio: mp3
, 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"
}
``MIT © javier-mora