useMarkup()

function useMarkup(): MarkupApi;

Register SVG sub-elements as JointJS selectors (and optionally magnets) on the current element view, so links and tools can target named parts of a React-rendered element. Must be used inside renderElement.

Returns

The MarkupApi: a selectorRef factory that tags an SVG node under a named selector so links and tools can target it, and a magnetRef factory that does the same and also marks the node as a connectable magnet.

magnetRef

readonly magnetRef: (selector, options?) => (node) => void;

Returns a React ref callback that registers the node under the given selector name AND marks it as a JointJS magnet, a valid endpoint for link connections.

Parameters

Parameter	Type	Description
selector	string	Unique selector name within the element (e.g. 'port-in', 'row-0').
options?	MagnetRefOptions	Magnet behavior options.

Returns

(node) => void

Throws

If selector is one of the reserved names (__portal__, root, portRoot).

---

selectorRef

readonly selectorRef: (selector) => (node) => void;

Returns a React ref callback that registers the node under the given selector name so links and tools can target it by name.

Parameters

Parameter	Type	Description
selector	string	Unique selector name within the element (e.g. 'body', 'item-0').

Returns

(node) => void

Throws

If selector is one of the reserved names (__portal__, root, portRoot).

Example

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

function MyComponent({ labels }: { labels: string[] }) {
  const { selectorRef, magnetRef } = useMarkup();
  return (
    // Tag the group as the 'body' selector so tools can target it.
    <g ref={selectorRef('body')}>
      {labels.map((label, index) => (
        // Each row is a magnet, so links can connect to it.
        <g ref={magnetRef(`item-${index}`)} key={label}>
          <text>{label}</text>
        </g>
      ))}
    </g>
  );
}