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

• pdf
• 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'
/>