-
[patch] - #1249 - Check for uninitialized source/target identifiers
-
[patch] - #1250 - Use ES5 target for CommonJs builds.
This release includes an experimental hook-based React-Dnd API. Documentation for this feature still needs to be created, but the three public facing hooks are: useDragSource, useDropTarget, and useDragLayer.
The hooks API will is currently experimental, and breaking changes of hooks may occur in non-major versions.
- useDragSource:
const ref = useRef(); // pass in a ref instead of connectDragSource()
const { isDragging } = useDragSource(ref, ItemTypes.KNIGHT, {
beginDrag(monitor){ /* */ },
// collect function defined in specification
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
})
return <div ref={ref}>...</div>- useDropTarget:
const ref = useRef(); // pass in a ref instead of connectDropTarget()
const { isOver, canDrop } = useDropTarget(ref, ItemTypes.KNIGHT, {
canDrop: () => canMoveKnight(props.x, props.y),
drop: () => moveKnight(props.x, props.y),
// collect function defined in specification
collect: monitor => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
})
return <div ref={ref}>...</div>- useDragLayer
const props = useDragLayer(monitor => ({
item: monitor.getItem(),
itemType: monitor.getItemType(),
initialOffset: monitor.getInitialSourceClientOffset(),
currentOffset: monitor.getSourceClientOffset(),
isDragging: monitor.isDragging(),
}))