DropZone
A standalone region that accepts drag-and-drop file interactions, rendering a clearly defined target area where users can drop files.
Installation
npm install --save @godaddy/antaresProps
children?React.ReactNode"Drop files to upload."Content displayed inside the drop zone.
className?string | undefined—Additional CSS class names applied to the root element.
getDropOperation?((types: DragTypes, allowedOperations: DropOperation[]) => DropOperation) | undefined—A function returning the drop operation to be performed when items matching the given types are dropped on the drop target.
onDropEnter?((e: DropEnterEvent) => void) | undefined—Handler that is called when a valid drag enters the drop target.
onDropMove?((e: DropMoveEvent) => void) | undefined—Handler that is called when a valid drag is moved within the drop target.
onDropActivate?((e: DropActivateEvent) => void) | undefined—Handler that is called after a valid drag is held over the drop target for a period of time. This typically opens the item so that the user can drop within it.
onDropExit?((e: DropExitEvent) => void) | undefined—Handler that is called when a valid drag exits the drop target.
onDrop?((e: DropEvent) => void) | undefined—Handler that is called when a valid drag is dropped on the drop target.
isDisabled?boolean | undefined—Whether the drop target is disabled. If true, the drop target will not accept any drops.
onHoverStart?((e: HoverEvent) => void) | undefined—Handler that is called when a hover interaction starts.
onHoverEnd?((e: HoverEvent) => void) | undefined—Handler that is called when a hover interaction ends.
onHoverChange?((isHovering: boolean) => void) | undefined—Handler that is called when the hover state changes.
style?StyleOrFunction<DropZoneRenderProps> | undefined—The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
render?DOMRenderFunction<"div", DropZoneRenderProps> | undefined—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot?string | null | undefined—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
Examples
Basic Usage
A minimal drop zone with the default instructional text. The onDrop callback receives the dropped items; use the exported isFileDropItem guard to narrow them to files.
import { DropZone, type DropZoneProps, isFileDropItem } from '@godaddy/antares';export function DefaultExample(props?: Partial<DropZoneProps>) { return ( <DropZone onDrop={function handleDrop(e) { const files = e.items.filter(isFileDropItem); console.log('Dropped files:', files); }} {...props} /> );}Custom Content
Pass any React node as children to replace the default instructional text — for example, to describe the accepted file types and size limits.
import { DropZone, isFileDropItem, Flex, Text } from '@godaddy/antares';export function CustomContentExample() { return ( <DropZone onDrop={function handleDrop(e) { const files = e.items.filter(isFileDropItem); console.log('Dropped files:', files); }} > <Flex direction="column" alignItems="center" gap="xs"> <Text>Drag your images here</Text> <Text>PNG, JPG, or GIF up to 10MB</Text> </Flex> </DropZone> );}Disabled
Set isDisabled to prevent the drop zone from accepting interactions. The zone is dimmed and the cursor indicates it is not interactive.
import { DropZone } from '@godaddy/antares';export function DisabledExample() { return <DropZone isDisabled />;}Accessibility
Keyboard
| Key | Description |
|---|---|
Tab | Moves focus to the drop zone |
Enter / Space | Opens the file picker so files can be selected without a pointer |
Screen readers
The drop zone renders a visually hidden <button> inside the container. Assistive technology discovers and announces this button as an interactive element — activating it opens the native file picker without a pointer. The button's accessible name defaults to "DropZone"; override it with aria-label on the DropZone component to provide more specific context (e.g. aria-label="Upload profile photo").
Best Practices
- Use the drop zone alongside a button-based file picker — drag-and-drop is a convenience, never the only way to upload.
- Replace the default text with
childrento communicate the accepted file types and size limits up front. - Let the drop zone fill its container; constrain it with the surrounding layout rather than setting a fixed width on the component itself.
- Reflect upload state (validating, uploading, error) outside the drop zone so the target area stays clear and predictable.