<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
: stringpath
: stringlabelX
: numberlabelY
: numberlabel
: stringlabelStyle
: svg attributeslabelShowBg
: booleanlabelBgStyle
: svg attributeslabelBgPadding
: numberlabelBgBorderRadius
: numberstyle
: svg attributesmarkerStart
: stringmarkerEnd
: stringinteractionWidth
: number - if0
, 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
.