useCell()

Read the current cell

function useCell<Cell>(): Computed<Cell>;

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

Type Parameter	Default type	Description
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

Example

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 />} />;

Select from the current cell

function useCell<Cell, Selected>(selector, isEqual?): Selected;

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

Type Parameter	Default type	Description
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

Parameter	Type	Description
selector	(cell) => Selected	derive a value from the current resolved cell record
isEqual?	(a, b) => 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

Example

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>;
}

Read a cell by id

function useCell<Cell>(id): Computed<Cell>;

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

Type Parameter	Default type	Description
Cell extends AnyCellRecord	CellRecord	input cell record shape (defaults to CellRecord); reads resolve to its Computed form

Parameters

Parameter	Type	Description
id	ID	cell id to track

Returns

Computed<Cell>

the resolved cell record

Example

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>;
}

Select from a cell by id

function useCell<Cell, Selected>(id, selector, isEqual?): Selected;

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

Type Parameter	Default type	Description
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

Parameter	Type	Description
id	ID	cell id to track
selector	(cell) => Selected	derive a value from the resolved cell record
isEqual?	(a, b) => 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