Function useElement

useElement<Element extends GraphElement, ReturnedElements = Element>(
selector?: (item: Element) => ReturnedElements,
isEqual?: (a: ReturnedElements, b: ReturnedElements) => boolean,
): ReturnedElements
A hook to access a specific graph element from the Paper context. It must be used inside a PaperProvider. This hook returns the selected element based on its cell id. It accepts:
- a selector function, which extracts the desired part from the element. (By default, it returns the entire element.)
- an optional isEqual function, used to determine if the selected value has changed.
How it works:
1. The hook retrieves the cell id using useCellId.
2. It subscribes to the graph store and fetches the element associated with the cell id.
3. The selector is applied to the fetched element and isEqual ensures proper re-rendering behavior.
Type Parameters
- Element extends GraphElement
- ReturnedElements = Element
Parameters
- selector: (item: Element) => ReturnedElements = ...
  The selector function to pick part of the element.
- isEqual: (a: ReturnedElements, b: ReturnedElements) => boolean = util.isEqual
  The function used to check equality.
Returns ReturnedElements
The selected element based on the current cell id.
Example
```
// Using without a selector (returns the full element):
const element = useElement();
```
Example
```
// Using with a selector (extract a property from the element):
const elementId = useElement((element) => element.id);
```
Example
```
// Using with a custom isEqual function:
const refinedElement = useElement(
  (element) => element,
  (prev, next) => prev.width === next.width
);
```
Default
```
initialElementselector
```
Default
```
util.isEqual
```
- Defined in joint-react/src/hooks/use-element.ts:36

Function useElement

Type Parameters

Parameters

Returns ReturnedElements

Example

Example

Example

Default

Default

Settings