@joint/react
    Preparing search index...

    Function useCell

    useCell()

    • Read the current cell from the closest CellIdContext, the id is provided by <Paper /> around renderElement / renderLink. Use this inside a render callback (or a component mounted from one) to access the full cell record.

      Throws when used outside of a Paper render context, or when the id no longer resolves to a cell in the store (e.g. deleted mid-render).

      Type Parameters

      • Cell extends AnyCellRecord = CellRecord

        input cell record shape (defaults to CellRecord); reads resolve to its Computed form

      Returns Computed<Cell>

      the current resolved cell record

      Read the current cell

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

      function NodeLabel() {
        // The id comes from the <Paper> render callback context.
        const cell = useCell();
        return <text>{String(cell.id)}</text>;
      }

      <Paper renderElement={() => <NodeLabel />} />;

    • Read a selected slice from the current cell (context-scoped). Re-renders only when isEqual(prev, next) returns false.

      Throws if no cell resolves, never returns undefined.

      Type Parameters

      • Cell extends AnyCellRecord = CellRecord

        input cell record shape (defaults to CellRecord); reads resolve to its Computed form

      • Selected = Computed<Cell>

        selector return type (defaults to Cell)

      Parameters

      • selector: (cell: Computed<Cell>) => Selected

        derive a value from the current resolved cell record

      • 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 the current cell

      import { useCell, selectElementData } from '@joint/react';

      function NodeLabel() {
        type NodeData = { label: string };
        // Re-renders only when this element's data changes.
        const data = useCell(selectElementData<NodeData>);
        return <text>{data.label}</text>;
      }

    • Subscribe to a specific cell by id. Works anywhere, does not require CellIdContext. Throws when the id does not resolve to a cell.

      Type Parameters

      • Cell extends AnyCellRecord = CellRecord

        input cell record shape (defaults to CellRecord); reads resolve to its Computed form

      Parameters

      • id: ID

        cell id to track

      Returns Computed<Cell>

      the resolved cell record

      Read a cell by id

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

      function CellTypeBadge({ id }: { id: string }) {
        // Works outside a render callback too — subscribes to this id anywhere.
        const cell = useCell(id);
        return <span>{cell.type}</span>;
      }

    • Subscribe to a specific cell by id and derive a value from it. Works anywhere, does not require CellIdContext. Throws when the id does not resolve to a cell.

      Type Parameters

      • Cell extends AnyCellRecord = CellRecord

        input cell record shape (defaults to CellRecord); reads resolve to its Computed form

      • Selected = Computed<Cell>

        selector return type (defaults to Cell)

      Parameters

      • id: ID

        cell id to track

      • selector: (cell: Computed<Cell>) => Selected

        derive a value from the resolved cell record

      • 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

    Settings

    Member Visibility