useDrop & useDrag

A pair of hooks to help you manage data transfer between drag and drop

useDrop can be used alone to accept file, text or uri dropping.

useDrag should be used along with useDrop.

Paste into the drop area will also be treated as content drop.

Examples

Default Usage

drop here
box0
box1
box2
box3
box4

The drop area can accept files, uri, text or one of the boxes below.

API

const getDragProps = useDrag();
<div {...getDragProps(id)}>draggable</div>
const [ props, { isHovering } ] = useDrop({
onText: (text: string, e: Event) => void,
onFiles: (files: File[], e: Event) => void,
onUri: (uri: string, e: Event) => void,
onDom: (content: any, e: Event) => void
});

useDrag Result

PropertyDescriptionType
getDragPropsA function that accept a content as dragging values and return props passed to a dom element(content: any) => props

useDrop Result

PropertyDescriptionType
propsProps passed to the drop area-
isHoveringWhether the dragging element is on top of the drop areaboolean

useDrop Params

PropertyDescriptionTypeDefault
onTextThe callback when text is dropped(text: string, e: Event) => void-
onFilesThe callback when files are dropped(files: File[], e: Event) => void-
onUriThe callback when a uri is dropped(text: string, e: Event) => void-
onDomThe callback when a dom is dropped(content: any, e: Event) => void-