ReferenceTypes

ConnectionLineComponentProps

Source on GitHub

If you want to render a custom component for connection lines, you can set the connectionLineComponent prop on the <ReactFlow /> component. The ConnectionLineComponentProps are passed to your custom component.

export type ConnectionLineComponentProps = {
  connectionLineStyle?: React.CSSProperties;
  connectionLineType: ConnectionLineType;
  fromNode?: Node;
  fromHandle?: Handle;
  fromX: number;
  fromY: number;
  toX: number;
  toY: number;
  fromPosition: Position;
  toPosition: Position;
  connectionStatus: 'valid' | 'invalid' | null;
};

Props

#connectionLineStyle?
#connectionLineType
ConnectionLineType
#fromNode?
Node
The node the connection line originates from.
#fromHandle?
Handle
The handle on the fromNode that the connection line originates from.
#fromX
number
#fromY
number
#toX
number
#toY
number
#fromPosition
Position
#toPosition
Position
#connectionStatus
"valid" | "invalid" | null
If there is an isValidConnection callback, this prop will be set to "valid" or "invalid" based on the return value of that callback. Otherwise, it will be null.