CanConnectOptions
Options for the validateConnection prop of <Paper> — declarative rules
that toggle the common connection constraints (self-loops, link-to-link,
duplicate links, root connections) and optionally layer your own check on top.
Reach for this object instead of a ValidateConnection callback when the
built-in rules already cover what you need.
Example
import { GraphProvider, Paper } from '@joint/react';
<GraphProvider>
<Paper
validateConnection={{
allowSelfLoops: true,
validate: ({ target }) => target.port === 'in',
}}
renderElement={() => <rect width={80} height={40} />}
/>
</GraphProvider>;
Properties
allowLinkToLink?
readonly optional allowLinkToLink?: boolean;
Allow links to start or end on another link, not just on elements.
Default
false
allowRootConnection?
readonly optional allowRootConnection?: boolean | "auto";
Whether a link may attach to an element's root (its body) instead of a port or magnet.
true— always allow root connections.false— never allow them; require a port or magnet.'auto'— allow a root connection only when the element has no ports.
Default
'auto'
allowSelfLoops?
readonly optional allowSelfLoops?: boolean;
Allow a cell to connect to itself.
Default
false
linkLimit?
readonly optional linkLimit?: "none" | "one-per-direction" | "one-per-pair";
How many links may connect the same source+port and target+port. Matching is port/magnet aware, so links on different ports never collide.
'none'— no limit; any number of links, in either direction.'one-per-direction'— one link each way: a secondA→Bis blocked, but the reverseB→Ais allowed.'one-per-pair'— one link per element pair:A→Bblocks both anotherA→Band the reverseB→A.
Default
'one-per-direction'
validate?
readonly optional validate?: (context) => boolean;
Extra check run only after every built-in rule passes; receives the same ValidateConnectionParams context as ValidateConnection.
Parameters
| Parameter | Type |
|---|---|
context | ValidateConnectionParams |
Returns
boolean