Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karimmokhtar/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://github.com/karimmokhtar/react-drag-drop-files
drag drag-and-drop drop file file-upload react react-drag-and-drop react-drag-and-drop-file react-drag-and-drop-files react-drag-drop-file react-drag-drop-files react-draggable styled-components
Last synced: 3 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/karimmokhtar/react-drag-drop-files
- Owner: KarimMokhtar
- License: mit
- Created: 2021-06-19T15:18:31.000Z (over 3 years ago)
- Default Branch: dev
- Last Pushed: 2024-10-22T23:14:57.000Z (22 days ago)
- Last Synced: 2024-11-11T03:36:54.384Z (3 days ago)
- Topics: drag, drag-and-drop, drop, file, file-upload, react, react-drag-and-drop, react-drag-and-drop-file, react-drag-and-drop-files, react-drag-drop-file, react-drag-drop-files, react-draggable, styled-components
- Language: TypeScript
- Homepage:
- Size: 1.37 MB
- Stars: 248
- Watchers: 2
- Forks: 91
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Drag and Drop Files
[](https://www.npmjs.org/package/react-drag-drop-files) [](https://github.com/prettier/prettier) [![npm download][download-image]][download-url]
[download-image]: https://img.shields.io/npm/dm/react-drag-drop-files.svg?style=flat-square
[download-url]: 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.
## Demo
[](https://codesandbox.io/s/react-drag-drop-files-sghbp)
## Installation
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 (
);
}
export default DragDrop;
```
## Options
| 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 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 | 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**) | `
this is inside drop area
` 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'}` |
## How to contribute:
- Please follow the instructions inside this file: [here](CONTRIBUTION.md)
### Upcoming...
- [X] Contribution Guide
- [X] Github actions
## License
[MIT](https://choosealicense.com/licenses/mit/)