react-dnd 7.2.0 on Node.js Yarn

[patch] - #1249 - Check for uninitialized source/target identifiers
[patch] - #1250 - Use ES5 target for CommonJs builds.
[minor] - #1251, #1244, #1173 - Experimental Hooks API

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(),
}))

react-dnd 7.2.0 Experimental Hooks API on Node.js Yarn

react-dnd 7.2.0
Experimental Hooks API

on Node.js Yarn