react-drag-n-drop-image
npm install react-drag-n-drop-image

[![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.

Install it from npm (using NPM).
``bash`
npm i --save react-drag-n-drop-image
or:
`bash`
yarn add react-drag-n-drop-image
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;
`
`jsx static`
.dragging {
background-color: red;
}
| Option | Type | Description | value example |
| ----------- | ----------- | ---------------------------- | --------------------------------------------- |
| onChange | Fn | file upload onChange Event | const onChange = (files) => {} |[{ id: string, file:File, preview:string }]
| fileValue | Array | file state value | |
| 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 | ` |