Skip to main content

Configuring edge options

By default, each smart edge preset uses built-in pathfinding settings. Tune options such as gridRatio or nodePadding without building a full custom edge.

Define configured edge types at module scope (not inside a component render function):

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

const edgeTypes = {
  smartstep: createSmartEdge("step", { gridRatio: 5, nodePadding: 20 }),
};

Pass edgeTypes to <ReactFlow edgeTypes={edgeTypes} /> as usual.

important

React Flow identifies edge types by component reference. Calling createSmartEdge during render creates a new component each time and can remount edges. Define edgeTypes outside your component, or memoize with stable dependencies.

Presets: "bezier", "straight", "step", and "smoothstep".

Using SmartEdge and smartEdgePresets​

When you need custom rendering (labels, buttons, etc.) alongside tuned options:

import { useNodes } from "@xyflow/react";
import { SmartEdge, smartEdgePresets } from "@tisoap/react-flow-smart-edge";
import type { EdgeProps } from "@xyflow/react";

function MySmartStepEdge(props: EdgeProps) {
  const nodes = useNodes();

  return (
    <SmartEdge
      {...props}
      nodes={nodes}
      options={{ ...smartEdgePresets.step, gridRatio: 5 }}
    />
  );
}

For option-only changes, prefer createSmartEdge. Use SmartEdge + smartEdgePresets when you also customize the rendered output.

All options​

See the Options section for per-option documentation.