Edge<T>

Source on GitHub (opens in a new tab)

Where a Connection is the minimal description of an edge between two nodes, an Edge is the complete description with everything React Flow needs to know in order to render it.

export type Edge<T> =
  | DefaultEdge<T>
  | SmoothStepEdgeType<T>
  | BezierEdgeType<T>;

Variants

DefaultEdge<T>

Source on GitHub (opens in a new tab)

Name	Type
#`id`	`string`
#`type`	`string`
#`style?`	`React.CSSProperties`
#`className?`	`string`
#`source`	`string`
#`target`	`string`
#`sourceNode?`	`Node`
#`targetNode?`	`Node`
#`sourceHandle`	`string \| null`
#`targetHandle`	`string \| null`
#`data`	`T`
#`hidden`	`boolean`
#`animated`	`boolean`
#`selected`	`boolean`
#`deletable`	`boolean`
#`focusable`	`boolean`
#`updatable?`	`boolean \| "source" \| "target"` deprecated: Please use reconnectable
#`reconnectable?`	`boolean \| "source" \| "target"` Determines whether the edge can be updated by dragging the source or target to a new node. This property will override the default set by the edgesReconnectable prop on the <ReactFlow /> component.
#`markerStart`	`string \| EdgeMarker`
#`markerEnd`	`string \| EdgeMarker`
#`zIndex?`	`number`
#`interactionWidth`	`number` ReactFlow renders an invisible path around each edge to make them easier to click or tap on. This property sets the width of that invisible path.
#`ariaLabel`	`string`
#`label?`	`string \| React.ReactNode`
#`labelStyle?`	`React.CSSProperties`
#`labelShowBg?`	`boolean`
#`labelBgStyle?`	`React.CSSProperties`
#`labelBgPadding?`	`[number, number]`
#`labelBgBorderRadius?`	`number`

SmoothStepEdgeType<T>

Source on GitHub (opens in a new tab)

The SmoothStepEdgeType variant has all the same fields as the DefaultEdge variant, but it also has the following additional fields:

Name	Type
#`type`	`"smoothstep"`
#`pathOptions?`	`object`
#`pathOptions.offset?`	`number`
#`pathOptions.borderRadius?`	`number`

BezierEdgeType<T>

Source on GitHub (opens in a new tab)

The BezierEdgeType variant has all the same fields as the DefaultEdge variant, but it also has the following additional fields:

Name	Type
#`type`	`"default"`
#`pathOptions?`	`object`
#`pathOptions.curvature?`	`number`

Default edge types

You can create any of React Flow's default edges by setting the type property to one of the following values:

"default"
"straight"
"step"
"smoothstep"
"simplebezier"

If you don't set the type property at all, React Flow will fallback to the "default" bezier curve edge type.

These default edges are available even if you set the edgeTypes prop to something else, unless you override any of these keys directly.

DefaultEdgeOptions EdgeChange