react-dnd-html5-backend

Drag Source

This code sample demonstrates how to create a draggable component using the useDrag hook from react-dnd. The component becomes a drag source that can be dragged around the screen.

import { useDrag } from 'react-dnd';

function DraggableComponent() {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'BOX',
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }));

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      Draggable Content
    </div>
  );
}

Drop Target

This code sample shows how to create a drop target using the useDrop hook from react-dnd. The component can accept draggable items and provides visual feedback when an item is dragged over it.

import { useDrop } from 'react-dnd';

function DroppableComponent() {
  const [{ canDrop, isOver }, drop] = useDrop(() => ({
    accept: 'BOX',
    drop: () => ({ name: 'DroppableComponent' }),
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  }));

  return (
    <div ref={drop} style={{ backgroundColor: isOver ? 'green' : 'white' }}>
      {canDrop ? 'Release to drop' : 'Drag a box here'}
    </div>
  );
}

Custom Drag Layer

This code sample illustrates how to use a custom drag layer to render a custom preview of the draggable item. The useDragLayer hook provides the necessary state to render the preview at the correct position.

import { useDragLayer } from 'react-dnd';

function CustomDragLayer() {
  const { isDragging, item, currentOffset } = useDragLayer((monitor) => ({
    item: monitor.getItem(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging(),
  }));

  if (!isDragging) {
    return null;
  }

  return (
    <div style={{ position: 'fixed', pointerEvents: 'none', left: currentOffset.x, top: currentOffset.y }}>
      Custom Drag Layer Content
    </div>
  );
}