EdgeProps

Source on GitHub

When you implement a custom edge it is wrapped in a component that enables some basic functionality. Your custom edge component receives the following props:


export type EdgeProps<EdgeType extends Edge = Edge> = {
  id: string;
  animated: boolean;
  data: EdgeType['data'];
  style: React.CSSProperties;
  selected: boolean;
  source: string;
  target: string;
  sourceHandleId?: string | null;
  targetHandleId?: string | null;
  interactionWidth: number;
  sourceX: number;
  sourceY: number;
  targetX: number;
  targetY: number;
  sourcePosition: Position;
  targetPosition: Position;
  label?: string | React.ReactNode;
  labelStyle?: React.CSSProperties;
  labelShowBg?: boolean;
  labelBgStyle?: CSSProperties;
  labelBgPadding?: [number, number];
  labelBgBorderRadius?: number;
  markerStart?: string;
  markerEnd?: string;
  pathOptions?: any;
};

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`