EdgeProps
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
Name | Type | Default |
---|---|---|
id | EdgeType["id"] Unique id of an edge. | |
animated | EdgeType["animated"] | |
data | EdgeType["data"] Arbitrary data passed to an edge. | |
style | EdgeType["style"] | |
selected | EdgeType["selected"] | |
source | EdgeType["source"] Id of source node. | |
target | EdgeType["target"] Id of target node. | |
selectable | EdgeType["selectable"] | |
deletable | EdgeType["deletable"] | |
sourceX | number | |
sourceY | number | |
targetX | number | |
targetY | number | |
sourcePosition | Position | |
targetPosition | Position | |
label | ReactNode The label or custom element to render along the edge. This is commonly a text label or some custom controls. | |
labelStyle | CSSProperties Custom styles to apply to the label. | |
labelShowBg | boolean | |
labelBgStyle | CSSProperties | |
labelBgPadding | [number, number] | |
labelBgBorderRadius | number | |
sourceHandleId | string | null | |
targetHandleId | string | null | |
markerStart | string | |
markerEnd | string | |
pathOptions | any | |
interactionWidth | number |
Last updated on