<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:
path
: stringlabelX
: numberlabelY
: numberlabel
: stringlabelStyle
: svg attributeslabelShowBg
: booleanlabelBgStyle
: svg attributeslabelBgPadding
: numberlabelBgBorderRadius
: numberstyle
: svg attributesmarkerStart
: string or marker configmarkerEnd
: string or marker configinteractionWidth
: number - if0
, no extra helper edge will be rendered