Hooks API

[darthtrevino]

Modified #1173

React-DnD Hooks API:

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