@joint/react
    Preparing search index...

    Interface 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.

    import { GraphProvider, Paper } from '@joint/react';

    <GraphProvider>
      <Paper
        validateConnection={{
          allowSelfLoops: true,
          validate: ({ target }) => target.port === 'in',
        }}
        renderElement={() => <rect width={80} height={40} />}
      />
    </GraphProvider>;
    interface CanConnectOptions {
        allowLinkToLink?: boolean;
        allowRootConnection?: boolean | "auto";
        allowSelfLoops?: boolean;
        linkLimit?: "none" | "one-per-direction" | "one-per-pair";
        validate?: (context: ValidateConnectionParams) => boolean;
    }
    Index

    Properties

    allowLinkToLink? allowRootConnection? allowSelfLoops? linkLimit? validate?

    Properties

    allowLinkToLink?: boolean

    Allow links to start or end on another link, not just on elements.

    false
    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.
    'auto'
    allowSelfLoops?: boolean

    Allow a cell to connect to itself.

    false
    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 second A→B is blocked, but the reverse B→A is allowed.
    • 'one-per-pair' — one link per element pair: A→B blocks both another A→B and the reverse B→A.
    'one-per-direction'
    validate?: (context: ValidateConnectionParams) => boolean

    Extra check run only after every built-in rule passes; receives the same ValidateConnectionParams context as ValidateConnection.

    Settings

    Member Visibility

    On This Page

    Properties