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.
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.
Markup utilities returned by useMarkup.
ReadonlymagnetRef: (selector: string, options?: MagnetRefOptions) => (node: Element | null) => voidReturns 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.
ReadonlyselectorRef: (selector: string) => (node: Element | null) => voidReturns a React ref callback that registers the node under the given selector name so links and tools can target it by name.
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>
);
}
useMarkup()