useCellDrag()

function useCellDrag(): CellDragState;

Tracks the live drag state of the current cell while the user drags it across the paper. Read isDragging to dim the element, or canDrop / dropArea to render a drop indicator. Use it inside a renderElement callback.

Only the cell being dragged re-renders; every other cell receives a shared, frozen idle reference, so large diagrams stay cheap to render.

Returns

CellDragState

the CellDragState scoped to the current cell

Example

import { Paper, useCellDrag } from '@joint/react';

function MyElement({ label }: { label: string }) {
  const { isDragging } = useCellDrag();
  return (
    <div style={{ opacity: isDragging ? 0.5 : 1 }}>
      {label}
    </div>
  );
}

<Paper renderElement={(el) => <MyElement label={String(el.id)} />} />;