React Drag and Drop Images

[![npm download][download-image]][download-url]

[download-image]: https://img.shields.io/npm/dm/react-drag-n-drop-image.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-drag-n-drop-image

drag & drop image file upload library.

Demo


Installation

Install it from npm (using NPM).

``bash
npm i --save react-drag-n-drop-image
`

or:

`bash
yarn add react-drag-n-drop-image
`

Usage

Using react component just as simple as:

`jsx static
import React, { useState } from 'react';
import FileUpload from 'react-drag-n-drop-image';

function FileUpload() {
const [files, setFiles] = useState([]);
const onChange = file => {
setFiles(file);
};
const onRemoveImage = id => {
setFiles(prev => prev.filter(i => i.id !== id));
};
const onError = error => {
console.error(error);
};
return (


);
}

export default FileUpload;
`

drag in box css

`jsx static
.dragging {
background-color: red;
}
`

Options

| Option | Type | Description | value example |
| ----------- | ----------- | ---------------------------- | --------------------------------------------- |
| onChange | Fn | file upload onChange Event | const onChange = (files) => {} |
| fileValue | Array | file state value | [{ id: string, file:File, preview:string }] |
| body | JSX Element | jsx |

|
| loadingBody | JSX ELement | jsx | |
| maxSize | Number | size(MB) | defalut maxSize=5 |
| onError | Fn | type, maxSize, overlab Error | const onError = (error) => {} |
| type | Array | image type | defalut type = ['jpg', 'jpeg', 'png'] |
| overlap | Boolean | overlap true or false | defalut overlap = true |
| className | String | container div className | ` |

License

MIT