@codesmith-99/react-file-preview
TypeScript icon, indicating that this package has built-in type declarations

1.0.36 • Public • Published

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

Package Sidebar

Install

npm i @codesmith-99/react-file-preview

Weekly Downloads

179

Version

1.0.36

License

MIT

Unpacked Size

81.9 kB

Total Files

11

Last publish

Collaborators

  • codesmith-99