@yelysei/react-files-drag-and-drop

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

Installation

Install with npm:

npm i @yelysei/react-files-drag-and-drop

or with yarn:

yarn add @yelysei/react-files-drag-and-drop

Usage

First you need to import FilesDragAndDrop component:

import FilesDragAndDrop from '@yelysei/react-files-drag-and-drop';

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

Package detail

@yelysei/react-files-drag-and-drop

readme

@yelysei/react-files-drag-and-drop

Installation

Usage

Props