Skip to Content
ReferenceTypes

DefaultEdgeOptions

Source on GitHub

Many properties on an Edge are optional. When a new edge is created, the properties that are not provided will be filled in with the default values passed to the defaultEdgeOptions prop of the <ReactFlow /> component.

export type DefaultEdgeOptions<T> = { type?: string; animated?: boolean; hidden?: boolean; deletable?: boolean; selectable?: boolean; data?: T; selected?: boolean; markerStart?: string | EdgeMarker; markerEnd?: string | EdgeMarker; zIndex?: number; ariaLabel?: string; interactionWidth?: number; focusable?: boolean; };

Fields

NameTypeDefault
typestring | undefined

Type of edge defined in edgeTypes.

animatedboolean
hiddenboolean
deletableboolean
selectableboolean
dataRecord<string, unknown>

Arbitrary data passed to an edge.

markerStartEdgeMarkerType

Set the marker on the beginning of an edge.

markerEndEdgeMarkerType

Set the marker on the end of an edge.

zIndexnumber
ariaLabelstring
interactionWidthnumber

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.

labelReactNode

The label or custom element to render along the edge. This is commonly a text label or some custom controls.

labelStyleCSSProperties

Custom styles to apply to the label.

labelShowBgboolean
labelBgStyleCSSProperties
labelBgPadding[number, number]
labelBgBorderRadiusnumber
styleCSSProperties
classNamestring
reconnectableboolean | HandleType

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.

focusableboolean
Last updated on