1.0.6 • Published 4 years ago
@muchhadd/react-file-preview v1.0.6
react-file-preview
A react component to preview a file/blob with support for various formats.
Written in Typescript.
Installation
npm i @muchhadd/react-file-preview --save
Peer Dependencies
- "react": "^16.12.0"
- "react-dom": "^16.12.0"
- Font Awesome
Supported formats for preview
- images (png, jpg, jpeg, gif)
Component props
- file: Blob - File blob for preview
- filename: string - Filename to be used for download action and for format extraction(if not passed explicitly)
- format?: string - Optional value for the file format
- className?: string - Optional css class for preview parent element
- downloadButtonClassName?: string - For the download button displayed on unsupported format
Usage
Basic
import {FilePreview} from '@muchhadd/react-file-preview';
<FilePreview
file={new Blob(['test'], { type: 'text/plain' })}
fileName={'test-file.txt'}
/>
Custom format extension
Else extracted from the filename
import {FilePreview} from '@muchhadd/react-file-preview';
<FilePreview
file={new Blob(['test'], { type: 'text/plain' })}
fileName={'test-file.txt'}
format={'txt'}
/>
Custom css class
import {FilePreview} from '@muchhadd/react-file-preview';
<FilePreview
file={new Blob(['test'], { type: 'text/plain' })}
fileName={'test-file.txt'}
className='card'
/>
Custom download button class
Download button displayed on unsupported format
import {FilePreview} from '@muchhadd/react-file-preview';
<FilePreview
file={new Blob(['test'], { type: 'text/plain' })}
fileName={'test-file.txt'}
className='card'
downloadButtonClassName='btn-primary'
/>