# react-drag-drop-files > Light React Drag & Drop files and images library styled by styled-components Latest version **3.1.0** (published 2025-07-24) · MIT license · 0 weekly downloads ## Install ```sh npm install react-drag-drop-files pnpm add react-drag-drop-files yarn add react-drag-drop-files bun add react-drag-drop-files ``` ## Health **Score 40/100 (D)** — status: maintenance-mode. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 3.1.0 | | Published | 2025-07-24 | | First published | 2021-06-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 87.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 269 | | Author | Karim | | Maintainers | karimmokhtar | | Keywords | light-react, react, react-drag-drop, react-select-file, drag, drop, upload, select, files, images, styled-compomnets | ## Links - npm: https://www.npmjs.com/package/react-drag-drop-files - Repository: https://github.com/KarimMokhtar/react-drag-drop-files - Issues: https://github.com/KarimMokhtar/react-drag-drop-files/issues - npm.io page: https://npm.io/package/react-drag-drop-files ## Dependencies (2) - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [styled-components](https://npm.io/package/styled-components.md) ^6.1.11 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 3.1.0 (latest) — 2025-07-24 - 3.0.1 — 2025-04-01 - 3.0.0 — 2025-03-27 - 2.4.0 — 2024-10-22 - 2.3.11 — 2024-10-22 - 2.3.10 — 2023-04-30 - 2.3.9 — 2023-02-25 - 2.3.8 — 2022-11-23 - 2.3.7 — 2022-05-29 - 2.3.6 — 2022-05-29 - 2.3.5 — 2022-04-02 - 2.3.4 — 2022-02-12 - 2.3.3 — 2022-02-10 - 2.3.2 — 2022-02-04 - 2.3.1 — 2022-01-30 - … 47 more at https://npm.io/package/react-drag-drop-files/versions ## README # React Drag and Drop Files [![Version](http://img.shields.io/npm/v/react-drag-drop-files.svg)](https://www.npmjs.org/package/react-drag-drop-files) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](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 [![Edit react-drag-drop-files](https://codesandbox.io/static/img/play-codesandbox.svg)](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/) --- _Source: https://npm.io/package/react-drag-drop-files · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._