@codesmith-99/react-file-preview v1.0.33

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