react-drop-region
v2.0.0
Published
A React component to upload files with Drag & Drop.
Downloads
8
Readme
Installation
npm install react-drop-region
or
yarn add react-drop-region
Usage
Live demo: CodeSandbox
import DropRegion from "react-drop-region";
export default function DropRegionDemo() {
const [isHovering, setIsHovering] = useState(false);
return (
<DropRegion
setIsHovering={isHovering => {
setIsHovering(isHovering);
}}
handleAcceptedFiles={files => {
console.log("Accepted files: ", files);
}}
>
<div
className="drop-region"
style={{ height: 150, width: 300, border: "2px dashed hotpink" }}
>
{isHovering ? "Drop here" : "Drag and drop to upload"}
</div>
</DropRegion>
);
}
Props
* indicates that the prop is required.
| Props | Type | Default | Description |
| --------------------- | :---------: | :-------------: | ----------------------------------------------------------------------- |
| handleAcceptedFiles* | function | - | returns accepted files as an array. |
| handleRejectedFiles | function | - | returns rejected files as an array. |
| handleProgress | function | - | is fired periodically as the files are being uploaded. |
| setIsHovering | function | - | returns true
, if user is dragging over DropRegion. |
| onDrop | function | - | is invoked when upon drop
event. |
| onDragEnter | function | - | is invoked upon dragEnter
event. |
| onDragLeave | function | - | is invoked upon dragLeave
or dragExit
events. |
| onError | function | - | is invoked, if an error occurs during uploading files. |
| readAs | string | readAsDataURL
| specifies reading method. |
| allowMultiple | boolean | true
| if true, user may upload more than one file. |
| disable | boolean | false
| if true, user cannot upload files. |
| allowKeyboard | boolean | true
| if true, user can open file dialog by pressing Enter
or Space
keys. |
| allowClick | boolean | true
| if true, user can open file dialog by clicking on DropRegion. |
| validTypes | string[] | [] | pass accepted file types. |
| showPlaceholder | boolean | true | Placeholder is shown while waiting for full image to load |
| customPlaceholder | DOM Element | null | Pass your custom placeholder component/element. |