Edge Label Renderer

If you want to escape SVG world within an edge, you can use the <EdgeLabelRenderer />. It’s a portal component that lets you render edge labels as divs on top of the edges. If you want to add mouse interactions you need to set pointer-events: all on the label.

import { createRoot } from 'react-dom/client';
import App from './App';
 
 
const container = document.querySelector('#app');
const root = createRoot(container);
 
root.render(<App />);