@mateie/react-drag-drop-files
Version:
Light React Drag & Drop files and images library styled by styled-components
86 lines (63 loc) • 6.82 kB
Markdown
[](https://www.npmjs.org/package/react-drag-drop-files) [](https://github.com/prettier/prettier) [![npm download][download-image]][download-url]
[]: https://img.shields.io/npm/dm/react-drag-drop-files.svg?style=flat-square
[]: https://npmjs.org/package/react-drag-drop-files
Light and simple reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.
[](https://codesandbox.io/s/react-drag-drop-files-sghbp)
Install it from npm (using [NPM](http://webpack.github.io/)).
```bash
npm i --save react-drag-drop-files
```
or:
```bash
yarn add react-drag-drop-files
```
## Usage
Using react hooks just as simple as:
```jsx static
import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";
const fileTypes = ["JPG", "PNG", "GIF"];
function DragDrop() {
const [file, setFile] = useState(null);
const handleChange = (file) => {
setFile(file);
};
return (
<FileUploader handleChange={handleChange} name="file" types={fileTypes} />
);
}
export default DragDrop;
```
| Option | Type | Description | value example |
|-----------------------|-----------------------------|---------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|
| name | string | the name for your form (if exist) | `"myFile"` |
| multiple | boolean | a boolean to determine whether the multiple files is enabled or not | `true OR false - false by default` |
| label | string | the label (text) for your form (if exist) inside the uploading box - first word underlined | `"Upload or drop a file right here"` |
| uploadedLabel | string | the label (text) for your form (if exist) after a file was uploaded inside the uploading box | `"Uploaded Successfully! Upload another?"` |
| required | boolean | Conditionally set the input field as required | `true` or `false` |
| disabled | boolean | this for disabled the input | `true OR false` |
| hoverTitle | string | text appears(hover) when trying to drop a file | `"Drop here"` |
| fileOrFiles | Array<File> or File or null | this mainly made because if you would like to remove uploaded file(s) pass null or pass another file as initial |
| classes | string | string with the classes wished to add | `"drop_area drop_zone"` |
| types | Array<strings> | array of strings with extensions to check and go throw | `['png', 'jpeg', ...]` |
| onTypeError | function | function that will be called only of error occurred related to type | `(err) => console.log(err)` |
| children | JSX Element, any | if you want to replace the current design inside the box of drop zone. (**it will remove the default exist style**) | `<div><p>this is inside drop area</p></div>` or just text |
| maxSize | number | the maximum size of the file (number in mb) | 2 |
| minSize | number | the minimum size of the file (number in mb) | 1 |
| onSizeError | function | function that will be called only if error related to min or max size occurred | `(file) => console.log(file)` |
| onDrop | function | function that will be called when the user drops file(s) on the drop area only | `(file) => console.log(file)` |
| onSelect | function | function that will be called when the user selects file(s) on click the file area only | `(file) => console.log(file)` |
| handleChange | function | function that will be called when the user selects or drops file(s) | `(file) => console.log(file)` |
| onDraggingStateChange | function | function that will be called with the state of dragging | `(dragging) => console.log(dragging)` |
| dropMessageStyle | CSS Properties | A CSS property to style the hover message | `{backgroundColor: 'red'}` |
- Please follow the instructions inside this file: [here](CONTRIBUTION.md)
- [X] Contribution Guide
- [X] Github actions
[](https://choosealicense.com/licenses/mit/)