useSelectionCollection()

function useSelectionCollection(): SelectionCollectionApi;

Returns the stable selection collection provided by the nearest <Diagram> ancestor, plus a selectCells setter operating on it.

This hook does not subscribe to reactive state: it never re-renders when the selection changes. Use useCells(api.collection, ...) for reactive reads.

Throws when called outside <Diagram>.

Returns

A SelectionCollectionApi with stable references.

collection

readonly collection: Collection<Cell<Attributes<Selectors>, ModelSetOptions>>;

Stable mvc.Collection<dia.Cell> of selected cells (provided by <Diagram>).

---

selectCells

readonly selectCells: SelectCells;

Programmatically set the selection. See SelectCells.

Example

import { useCells, useSelectionCollection } from '@joint/react-plus';

function SelectedCount() {
  const { collection, selectCells } = useSelectionCollection();
  const cells = useCells(collection);
  return (
    <button onClick={() => selectCells([])}>
      Clear {cells.length} selected cells
    </button>
  );
}