Quick start

Import a preset edge, register it in edgeTypes, and wrap your flow in SmartEdgeProvider. Every smart edge routes through the nearest SmartEdgeProvider, which needs your live nodes array, so nodes must be controlled (useNodesState, or your own state) rather than handed to React Flow as defaultNodes.

import { ReactFlow, useNodesState } from "@xyflow/react";
import {
  SmartEdgeProvider,
  SmartBezierEdge,
} from "@tisoap/react-flow-smart-edge";
import "@xyflow/react/dist/style.css";

const initialNodes = [
  { id: "1", data: { label: "Node 1" }, position: { x: 300, y: 100 } },
  { id: "2", data: { label: "Node 2" }, position: { x: 300, y: 200 } },
];

const edges = [{ id: "e21", source: "2", target: "1", type: "smart" }];

const edgeTypes = {
  smart: SmartBezierEdge,
};

export function Graph() {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);

  return (
    <SmartEdgeProvider nodes={nodes}>
      <ReactFlow
        nodes={nodes}
        onNodesChange={onNodesChange}
        defaultEdges={edges}
        edgeTypes={edgeTypes}
        fitView
      />
    </SmartEdgeProvider>
  );
}

Without a SmartEdgeProvider ancestor, smart edges warn once in development and render their native (non-routed) fallback edge instead.

Live example

Learn more

• Configuring edge options to tune gridRatio, nodePadding, and more
• Edge types to compare bezier, straight, step, smooth-step, and simple-bezier presets
• Performance for how routing stays off the main thread on large graphs