<EdgeLabelRenderer />
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.
info
The EdgeLabelRenderer
component is available in reactflow
version 11.2 and higher.
Mouse events
The <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.
Usage Example
Prop Types
You can pass the following props to the <EdgeLabelRenderer />
component:
children
: ReactNode