Edge Types

React Flow comes with four edge types (default, straight, step, smoothstep). As the names indicate, the edges differ in the representation. The default type is a bezier edge. The basic edge types are default (bezier), straight, step and smoothstep. The default edgeTypes object looks like this:

{
  default: BezierEdge,
  straight: StraightEdge,
  step: StepEdge,
  smoothstep: SmoothStepEdge
}

The keys represent the type names and the values are the edge components.

Custom Edges

If you want to introduce a new edge type you can pass an edgeTypes object to the ReactFlow component:

const Flow = (
  <ReactFlow edgeTypes={{ special: CustomEdgeComponent }} elements={elements} />
);

Now you could use the new type special for an edge. The straight, default and step types would still be available unless you overwrote one of them. There is an implementation of a custom edge in the edges example.

Prop Types

Custom edges are wrapped. They receive the following props:

source: string (node id)
target: string (node id)
selected: boolean
animated: boolean
label: string
labelStyle: svg attributes
labelShowBg: boolean
labelBgStyle: svg attributes
labelBgPadding: number
labelBgBorderRadius: number
data: object
style: svg attributes
arrowHeadType: 'arrow' | 'arrowclosed'
sourceX: number
sourceY: number
targetX: number
targetY: number
sourcePosition: 'left' | 'top' | 'right' | 'bottom'
targetPosition: 'left' | 'top' | 'right' | 'bottom'
markerEndId: string

Edit this page

current version: 9.6.9