@yelysei/react-files-dnd NPM

@yelysei/react-files-dnd

A light-weighted and customizable React Component that handles Files Drag & Drop.

Installation

Install with npm:

npm i @yelysei/react-files-dnd

or with yarn:

yarn add @yelysei/react-files-dnd

Usage

First you need to import FilesDragAndDrop component:

import FilesDragAndDrop from '@yelysei/react-files-dnd';

And then use it like this:

<FilesDragAndDrop
    onUpload={(files) => console.log(files)}
    count={3}
    formats={['jpg', 'png', 'svg']}
    containerStyles={{
        width: '200px',
        height: '200px',
        border: '1px solid #cccccc',
    }}
    openDialogOnClick
>
    <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }}>
        Drop files here
    </div>
</FilesDragAndDrop>

Props

Here is the list of all available props:

Name	Type	Required	Description
`onUpload`	function	+	Function that will be called when files are dropped into the component and successfully validated. Receives list of `files`
`children`	node	+	Inner content of the component
`count`	number		Max count of files
`formats`	string[]		List of available file formats
`openDialogOnClick`	boolean		If enabled, file dialog will be opened on click at the component
`hoverText`	string or function		Message that will appear when files are dragged over the component. Function receives available file formats and max files count.Default value: 'Drop files here'
`successText`	string or function		Message that will appear when files are successfully uploaded. Function receives list of uploaded files.Default value: 'Successfully uploaded'
`errorCountText`	string or function		Message that will appear when more files than available are dropped into the component. Function receives available max files count.Default value: ({count}) => `Only ${count} file${count !== 1 ? 's' : ''} can be uploaded at a time`
`errorFormatText`	string or function		Message that will appear when files with incorrect formats are dropped into the component. Function receives available file formats.Default value: ({formats}) => `Only following file formats are acceptable: ${formats.join(', ')}`
`containerStyles`	CSS properties		Custom styles for container
`hoverMessageStyles`	CSS properties		Custom styles for hover message
`successMessageStyles`	CSS properties		Custom styles for success message
`errorMessageStyles`	CSS properties		Custom styles for error message
`successTime`	number		Time duration in milliseconds when the success message will be displayed.Default value: 1000
`errorTime`	number		Time duration in milliseconds when the error message will be displayed.Default value: 2000
`onDrop`	function		Function that will be called when files are dropped into the component but not validated yet. Receives list of `files`
`onDragEnter`	function		Function that will be called when dragged files entered the component
`onDragLeave`	function		Function that will be called when dragged files leaved the component