DropZone

Drag-and-drop file drop target.

import { DropZone } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

Prop	Type	Default	Description
`onDrop` *	`(files: File[]) => void`	—	Callback when files are dropped or selected.
`accept`	`string`	`'*'`	Accepted MIME types or file extensions.
`multiple`	`boolean`	`false`	Allow multiple file selection.
`maxSize`	`number`	—	Maximum file size in bytes.
`disabled`	`boolean`	`false`	Disable drag & drop and file selection.
`disableClick`	`boolean`	`false`	Disable click-to-browse (the native file dialog). Drag & drop stays fully functional. Use when files are picked through another mechanism (e.g. a server-side media library) and opening the OS picker is undesirable.
`children`	`JSX.Element`	—	Custom content to render instead of default UI.
`idleText`	`string`	`'Drop files here or click to browse'`	Text shown when not dragging.
`activeText`	`string`	`'Release to upload'`	Text shown while dragging files over the zone.
`class`	`string`	—	Additional CSS classes.
`style`	`JSX.CSSProperties`	—	Custom styles.

* required prop.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.