createSmartEdge

Factory that returns a React Flow edge component for a preset with baked-in options.

import { createSmartEdge } from "@tisoap/react-flow-smart-edge";

const edgeTypes = {
  smartStep: createSmartEdge("step", { gridRatio: 5, nodePadding: 20 }),
  floatingBezier: createSmartEdge("bezier", { floating: true }),
  editableBezier: createSmartEdge("bezier", { editable: true }),
};

Presets

Preset	Equivalent component
"bezier"	SmartBezierEdge
"straight"	SmartStraightEdge
"step"	SmartStepEdge
"smoothstep"	SmartSmoothStepEdge
"simplebezier"	SmartSimpleBezierEdge

drawEdge and generatePath

Function options passed to createSmartEdge are ignored when the edge routes through SmartEdgeProvider (they cannot be sent to the worker). Serializable options (gridRatio, nodePadding, avoidAreas, borderRadius, hops, editable, …) still apply. For a custom drawer or pathfinder, call getSmartEdge on the main thread.

Important

Define edgeTypes at module scope. React Flow compares edge type components by reference; creating them during render remounts edges.

See Configuring edge options.