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.
View on Storybook
View source on GitHubImport
import { DropZone } from '@wordpress/components';
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
icon | unknown | jsx(SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(Path, { d: "M18.5 15v3.5H13V6.7l4.5 4.1 1-1.1-6.2-5.8-5.8 5.8 1 1.1 4-4v11.7h-6V15H4v5h16v-5z" }) }) | ||
isEligible | unknown | () => true |
Examples
Default
const Default = ( props ) => {
return (
<div
style={ {
background: 'lightgray',
padding: 32,
position: 'relative',
} }
>
Drop something here
<DropZone { ...props } />
</div>
);
};