Use with React Flow

The adapter is structural: it works with any objects that have React Flow-like fields, without importing React or @xyflow/react.

import { radialDagre } from 'ego-graph';
import { applyPositions, retargetHandles, toLayoutGraph } from 'ego-graph/react-flow';

const graph = toLayoutGraph(nodes, edges, 'customer-42');
const positions = radialDagre(graph);
const laidOutNodes = applyPositions(nodes, positions);
const laidOutEdges = retargetHandles(laidOutNodes, edges);

Lay out only after measurement

React Flow learns a custom node’s dimensions after rendering it. Until then toLayoutGraph falls back to 180 × 56. Run a second layout after useNodesInitialized() reports true, or pass your own fallback size as the fourth argument.

Point edges at their neighbour

Call retargetHandles after applyPositions. It chooses the side facing the counterpart and uses these default IDs:

Kind	Top	Right	Bottom	Left
Target	t	r	b	l
Source	st	sr	sb	sl

Render matching handles on your nodes, or give retargetHandles a custom (side, kind) => id mapper.