@joint/react
    Preparing search index...

    Function useCells

    useCells()

    • Subscribe to a collection's cells. Tracks collection membership (add/remove/reset) and reads cell records from the GraphProvider's container. Cells not in the graph (e.g. ui.Clipboard clones) fall back to the collection's own dia.Cell instances, converted to records on demand.

      Type Parameters

      Parameters

      • collection: Collection<Cell<Attributes<Selectors>, ModelSetOptions>>

        JointJS collection whose member IDs drive the subscription

      Returns readonly Cell[]

      readonly resolved cells array filtered by collection membership

      Subscribe to a collection

    • Subscribe to a collection's cells with a selector.

      Type Parameters

      Parameters

      • collection: Collection<Cell<Attributes<Selectors>, ModelSetOptions>>

        JointJS collection whose member IDs drive the subscription

      • selector: (cells: readonly Cell[]) => Selected

        derive a value from the picked resolved cells array

      • OptionalisEqual: (a: Selected, b: Selected) => boolean

        equality test used to short-circuit re-renders (defaults to a shallow, array-aware comparison that falls back to Object.is for scalar results)

      Returns Selected

      selected value

      Select from a collection

    • Subscribe to the full cells array.

      Returned array reference is stable across data-only mutations (the internal container mutates items in-place). Size changes produce a new snapshot token.

      Type Parameters

      Returns readonly Cell[]

      readonly resolved cells array

      Subscribe to all cells

      import { useCells } from '@joint/react';

      function CellCount() {
        const cells = useCells();
        return <span>{cells.length} cells</span>;
      }

    • Subscribe to a single cell by id.

      Type Parameters

      Parameters

      • id: ID

        cell id to track

      Returns Cell | undefined

      current resolved cell, or undefined when missing

      Subscribe to a cell by id

    • Subscribe to a single cell by id and derive a value from it. Subscribes only to that id so unrelated mutations don't trigger re-renders. A nullish id resolves to no cell, so the selector runs against undefined, handy for optional selection state (useCells(selectedId, ...)) with no ?? ''.

      Type Parameters

      • Cell extends AnyCellRecord = Computed<CellRecord>

        resolved cell record shape (defaults to Computed)

      • Selected = Cell | undefined

        selector return type (defaults to Cell | undefined)

      Parameters

      • id: ID | null | undefined

        cell id to track (nullish → selector receives undefined)

      • selector: (cell: Cell | undefined) => Selected

        derive a value from the cell (or undefined when missing)

      • OptionalisEqual: (a: Selected, b: Selected) => boolean

        equality test used to short-circuit re-renders (defaults to a shallow, array-aware comparison that falls back to Object.is for scalar results)

      Returns Selected

      selected value

      Select from a cell by id

    • Subscribe to a specific set of cells by id. Subscribes only to those ids (not the full container) so unrelated mutations don't trigger re-renders. Returns the picked cells in the order they appear in ids; missing ids are skipped. The array reference is stable when no picked cell changed.

      Type Parameters

      Parameters

      • ids: readonly ID[]

        cell ids to track

      Returns readonly Cell[]

      array of resolved cells (only those that exist; missing ids are skipped)

      Subscribe to specific cells

    • Subscribe to a specific set of cells by id and derive a value from them. Subscribes only to those ids; the selector receives the picked cells array.

      Type Parameters

      • Cell extends AnyCellRecord = Computed<CellRecord>

        resolved cell record shape (defaults to Computed)

      • Selected = readonly Cell[]

        selector return type (defaults to readonly Cell[])

      Parameters

      • ids: readonly ID[]

        cell ids to track

      • selector: (cells: readonly Cell[]) => Selected

        derive a value from the picked resolved cells array

      • OptionalisEqual: (a: Selected, b: Selected) => boolean

        equality test used to short-circuit re-renders (defaults to a shallow, array-aware comparison that falls back to Object.is for scalar results)

      Returns Selected

      selected value

      Select from specific cells

    • Subscribe via a selector. Runs on every commit; return equal values to skip re-render.

      Type Parameters

      • Cell extends AnyCellRecord = Computed<CellRecord>

        resolved cell record shape (defaults to Computed)

      • Selected = readonly Cell[]

        selector return type (defaults to readonly Cell[])

      Parameters

      • selector: (cells: readonly Cell[]) => Selected

        derive a value from the resolved cells array

      • OptionalisEqual: (a: Selected, b: Selected) => boolean

        equality test used to short-circuit re-renders (defaults to a shallow, array-aware comparison that falls back to Object.is for scalar results)

      Returns Selected

      selected value

      Subscribe via a selector

      import { useCells } from '@joint/react';

      function ElementCount() {
        // Counts cells whose type is the default 'element' and re-renders only when
        // that count changes; shape-typed elements (e.g. 'standard.Rectangle') are
        // not included.
        const count = useCells((cells) => cells.filter((cell) => cell.type === 'element').length);
        return <span>{count} elements</span>;
      }

    Settings

    Member Visibility