Skip to main content

<BaseEdge />

The BaseEdge component gets used internally for all the edges. It can be used inside a custom edge and handles the invisible helper edge and the edge label for you.

Usage

import { BaseEdge } from 'reactflow';

function CustomEdge(props: EdgeProps) {
const { sourceX, sourceY, targetX, targetY } = props;

const [edgePath] = getStraightPath({
sourceX,
sourceY,
targetX,
targetY,
});

return <BaseEdge path={edgePath} {...props} />;
}

Prop Types

You can pass the following props to the <BaseEdge /> component:

  • id: string
  • path: string
  • labelX: number
  • labelY: number
  • label: string
  • labelStyle: svg attributes
  • labelShowBg: boolean
  • labelBgStyle: svg attributes
  • labelBgPadding: number
  • labelBgBorderRadius: number
  • style: svg attributes
  • markerStart: string
  • markerEnd: string
  • interactionWidth: number - if 0, no extra helper edge will be rendered

Custom Marker

If you want to use an edge marker with a BaseEdge component, you need to pass the markerStart or markerEnd props of EdgeProps to the BaseEdge.