Edges are SVG based. If you want to render more complex labels you can use the
<EdgeLabelRenderer /> component to access a div based renderer. The
<EdgeLabelRenderer /> is a portal that renders the label in a div that is positioned on top of the edges. You can see an example usage of the component in the edge label renderer example.
EdgeLabelRenderer component is available in
reactflow version 11.2 and higher.
<EdgeLabelRenderer /> has no pointer events by default. If you want to add mouse interactions you need to set
pointerEvents: all and add the class name
nopan on the label or the element you want to interact with.
You can pass the following props to the
<EdgeLabelRenderer /> component: