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.