Skip to main content

useCardInteractions()

useCardInteractions(card): object

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

This hook integrates with @dnd-kit/sortable to enable dragging, dropping, and reordering of cards within and between columns. It handles transform animations, drag state tracking, and edge detection for insertion positioning.

Parameters​

card​

KanbanCardData

The kanban card data object containing the card's id and other properties

Returns​

object

An object containing:

  • ref - Ref callback to attach to the draggable card DOM element
  • isDragging - Boolean indicating if this card is currently being dragged
  • closestEdge - The closest edge ('top' or 'bottom') when another card is hovering over this card, or null if not hovering
  • style - CSS style object with transform and transition properties for drag animations
  • attributes - Accessibility and drag attributes to spread on the card element
  • listeners - Event listeners to spread on the drag handle element

attributes​

attributes: DraggableAttributes

closestEdge​

closestEdge: "top" | "bottom" | undefined

isDragging​

isDragging: boolean

listeners​

listeners: SyntheticListenerMap | undefined

ref()​

ref: (node) => void = setNodeRef

Parameters​

node​

HTMLElement | null

Returns​

void

style​

style: object

style.transform​

transform: string | undefined

style.transition​

transition: string | undefined

Example​

function KanbanCard({ card }: { card: KanbanCardData }) {
  const { ref, isDragging, closestEdge, style, attributes, listeners } = useCardInteractions(card);

  return (
    <div ref={ref} style={style} {...attributes} {...listeners}>
      {card.title}
      {closestEdge && <DropIndicator edge={closestEdge} />}
    </div>
  );
}