useIsCellSelected()

function useIsCellSelected(): boolean;

Returns whether the cell currently being rendered is part of the active selection, and re-renders that cell whenever its selection state flips.

Call it inside a renderElement / renderLink callback, where each cell is rendered individually and may want per-cell styling driven by selection state (e.g. a blue border on selected elements). Only the affected cell's component re-renders on a selection change, not every cell.

Requires a <Diagram> ancestor (it reads the diagram's selection collection).

Returns

boolean

true when the cell is selected, false otherwise.

Example

import { useCell, selectElementSize, useIsCellSelected } from '@joint/react-plus';

function RenderElement() {
  const isSelected = useIsCellSelected();
  const { width, height } = useCell(selectElementSize);
  return (
    <rect
      width={width}
      height={height}
      stroke={isSelected ? 'blue' : 'black'}
      strokeWidth={isSelected ? 2 : 1}
    />
  );
}