React-files-preview NPM

react-files-preview

A file view component for react.

Installation

npm i react-files-preview

🚀 Demo

https://react-files-preview.netlify.app/

Usage

import { ReactFilesPreview } from 'react-files-preview'
import 'react-files-preview/dist/style.css'  /* import css file*/

function App() {
  return (
    <>
      <ReactFilesPreview />
    </>
  )
}

export default App

Props

Name	Type	Default	Description
`files`	File[]	[]	Pass array of file objects for default files
`url`	string	null	Set image by passing image URL
`downloadFile`	boolean	true	Enables file download
`removeFile`	boolean	true	Show file remove icon on file hover
`showFileSize`	boolean	true	Show file size under files
`showSliderCount`	boolean	true	Show slides count under file slider
`disabled`	boolean	false	If true, prevents user to add files by disabling the component
`multiple`	boolean	true	Accepts one or more files
`accept`	string		Comma-separated lists of file types. See MIME Types
`maxFileSize`	number		Maximum allowed file size in bytes e.g. 1024 x 1024 x 5 == 5MB
`maxFiles`	number		Maximum files allowed to be added
`width`	string	basis-11/12	Tailwind CSS flex-basis class https://tailwindcss.com/docs/flex-basis
`height`	string		Tailwind CSS height class https://tailwindcss.com/docs/height
`fileWidth`	string	w-44	Tailwind CSS width class https://tailwindcss.com/docs/width
`fileHeight`	string	h-32	Tailwind CSS height class https://tailwindcss.com/docs/height
`getFile`	func		Returns all current files
`onChange`	func		Returns selected file(s)
`onRemove`	func		Returns the removed file
`onError`	func		Returns error message as string
`onClick`	func		Returns file on click