@codesmith-99/react-file-preview
v1.0.36
Published
The url previewer is built using native html elements for previewing url of files of the following type
Downloads
339
Maintainers
Readme
react-file-preview
The url previewer is built using native html elements for previewing url of files of the following type
- csv files
- text files
- pdf files
- html files
- image files (supported by the browser)
- audio files (supported by the browser)
- video files (supported by the browser)
- docx, xlsx, pptx files
Also, for unsupported files or when an error occurs, it falls back to using an icon.
Installation
npm i @codesmith-99/react-file-preview
Usage
Currently, the file supports only urls, in the future hopefully it can be extended to files also.
Basic Usage
import React, { useState } from 'react'
import FileViewer from '@codesmith-99/react-file-preview'
export default function Demo() {
const [file, setFile] = useState<string>('')
const [mimeType, setMimeType] = useState<string>()
const [name, setName] = useState<string>('image.jpg')
return (
<>
<div>
<label>File url</label>
<br />
<input type='text' onChange={(e) => setFile(e.target.value)} />
</div>
<div>
<label>File mimeType</label>
<br />
<input type='text' onChange={(e) => setMimeType(e.target.value)} value={mimeType} />
</div>
<div>
<label>File name</label>
<br />
<input type='text' onChange={(e) => setName(e.target.value)} value={name} />
</div>
<div
style={{
height: '500px',
width: '500px',
}}
>
<FileViewer
loader={undefined}
mimeType={mimeType}
src={file}
onError={(e) => {
console.log(e)
}}
fileName={name}
/>
</div>
</>
)
}
FileViewer Props
| Prop name | Type | Description | |--------------|:---------------------------:|-----------:| | src | string | The url of the file to be previewed | | mimetype | string (optional) | Used to specify the mimetype of the file and determine how to preview the url, alternatively filename can be used | | filename | string (optional) | The file extension is used to specify the mimetype of the file and determine how to preview the url, alternatively mimetype can be used | | loader | ReactNode (optional) | A loader to replace the default loader used by the project | | onError | (e: any) => void (optional) | A callback that can be used to detect if an error has occurred in the loading of the files| | autoPlay | boolean | To autoplay a video or an audio | containerErrorStyle | React.CSSProperties | The style of the container when an error occurs