Drop Zone

The DropZone element provides a way to drag and drop content into a designated area. Helpful for uploading files.

Drop files here

---

Usage

import { DropZone } from "@newfold/ui-component-library";

<DropZone
    onDrop={ (e) => console.log(e.dataTransfer.items) }
>
    <Title className="nfd-text-center">Drop files here</Title>
</DropZone>

---

Disabled

Use the disabled prop to disable the DropZone component.

Drop files here

<DropZone
    disabled
    onDrop={ (e) => console.log(e.dataTransfer.items) }
>
    <Title className="nfd-text-center">Drop files here</Title>
</DropZone>

---

Props

Attribute	Type	Description	Default
onDrop*	function |	Fires when files are dropped. The function will receive the event object as an argument.	-
children	node |	The children.	-
disabled	bool |	Whether the drop zone is disabled.	-
className	string |	-	-
tabIndex	string |	-	-