DropZone Edit
DropZone
is a Component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
Usage Usage
import { DropZone } from '@wordpress/components'; import { useState } from '@wordpress/element'; const MyDropZone = () => { const [ hasDropped, setHasDropped ] = useState( false ); return ( <div> { hasDropped ? 'Dropped!' : 'Drop something here' } <DropZone onFilesDrop={ () => setHasDropped( true ) } onHTMLDrop={ () => setHasDropped( true ) } onDrop={ () => setHasDropped( true ) } /> </div> ); }
Props Props
The component accepts the following props:
className className
A CSS class
to be appended after the default components-drop-zone
class.
- Type:
String
- Default:
undefined
label label
A string to be shown within the drop zone area.
- Type:
String
- Default:
Drop files to upload
onFilesDrop onFilesDrop
The function is called when dropping a file into the DropZone
. It receives an array of dropped files as an argument.
- Type:
Function
- Required: No
- Default:
noop
onHTMLDrop onHTMLDrop
The function is called when dropping a file into the DropZone
. It receives the HTML being dropped as an argument.
- Type:
Function
- Required: No
- Default:
noop
onDrop onDrop
The function is generic drop handler called if the onFilesDrop
or onHTMLDrop
are not called. It receives the drop event
object as an argument.
- Type:
Function
- Required: No
- Default:
noop