npm react-dnd 7.2.0
Experimental Hooks API

latest releases: 16.0.1, 16.0.0, 15.1.2...
5 years ago
  • [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(),
}))

Don't miss a new react-dnd release

NewReleases is sending notifications on new releases.