Skip to Content

EdgeProps

Source on GitHub 

When you implement a custom edge it is wrapped in a component that enables some basic functionality. The EdgeProps type takes a generic parameter to specify the type of edges you use in your application:

type AppEdgeProps = EdgeProps<MyEdgeType>;

Your custom edge component receives the following props:

Fields

NameTypeDefault
idEdgeType["id"]

Unique id of an edge.

animatedEdgeType["animated"]
dataEdgeType["data"]

Arbitrary data passed to an edge.

styleEdgeType["style"]
selectedEdgeType["selected"]
sourceEdgeType["source"]

Id of source node.

targetEdgeType["target"]

Id of target node.

selectableEdgeType["selectable"]
deletableEdgeType["deletable"]
sourceXnumber
sourceYnumber
targetXnumber
targetYnumber
sourcePositionPosition
targetPositionPosition
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
sourceHandleIdstring | null
targetHandleIdstring | null
markerStartstring
markerEndstring
pathOptionsany
interactionWidthnumber
Last updated on