<BaseEdge />

Source on GitHub (opens in a new tab)

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.

import { BaseEdge } from 'reactflow';
 
export function CustomEdge({ sourceX, sourceY, targetX, targetY, ...props }) {
  const [edgePath] = getStraightPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  });
 
  return <BaseEdge path={edgePath} {...props} />;
}

Props

Name	Type
#`id`	`string`
#`style`	`React.CSSProperties`
#`interactionWidth`	`number`
#`path`	`string`
#`markerStart`	`string`
#`markerEnd`	`string`
#`label`	`string \| React.ReactNode`
#`labelX`	`number`
#`labelY`	`number`
#`labelStyle`	`React.CSSProperties`
#`labelShowBg`	`boolean`
#`labelBgStyle`	`React.CSSProperties`
#`labelBgPadding`	`[number, number]`
#`labelBgBorderRadius`	`number`

Notes

If you want to use an edge marker with the <BaseEdge /> component, you can pass the markerStart or markerEnd props passed to your custom edge through to the <BaseEdge /> component. You can see all the props passed to a custom edge by looking at the EdgeProps type.