Skip to main content

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​

PresetEquivalent component
"bezier"SmartBezierEdge
"straight"SmartStraightEdge
"step"SmartStepEdge
"smoothstep"SmartSmoothStepEdge

Important​

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

See Configuring edge options.