Skip to main content

useColumnInteractions()

useColumnInteractions(column): object

Hook that provides drag-and-drop interactions for a kanban column.

This hook integrates with @dnd-kit/core to enable dropping cards into columns. It tracks hover states, validates drop targets based on the column's canDrop property, and provides visual feedback states for both the column itself and cards within it.

Parameters​

column​

KanbanColumnData

The kanban column data object containing the column's id, canDrop status, and other properties

Returns​

object

An object containing:

  • ref - Ref callback to attach to the droppable column DOM element
  • isHighlighted - Boolean indicating if the column should be visually highlighted (when a card from another column is being dragged)
  • isActive - Boolean indicating if the column is actively being hovered over and can accept the drop

isActive​

isActive: boolean

isHighlighted​

isHighlighted: boolean

ref()​

ref: (element) => void = setNodeRef

Parameters​

element​

HTMLElement | null

Returns​

void

Example​

function KanbanColumn({ column }: { column: KanbanColumnData }) {
  const { ref, isHighlighted, isActive } = useColumnInteractions(column);

  return (
    <div
      ref={ref}
      className={cn({
        'ring-2 ring-blue-300': isHighlighted && !isActive, // Potential drop target
        'ring-2 ring-blue-500 bg-blue-50': isActive,        // Active drop target
      })}
    >
      <h2>{column.title}</h2>
      {column.cards.map(card => <Card key={card.id} card={card} />)}
    </div>
  );
}