addEdge()

Source on GitHub

This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don’t add an invalid edge or duplicate an existing one.


import { useCallback } from 'react';
import {
  ReactFlow,
  addEdge,
  useNodesState,
  useEdgesState,
} from '@xyflow/react';
 
export default function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  const onConnect = useCallback(
    (connection) => {
      setEdges((oldEdges) => addEdge(connection, oldEdges));
    },
    [setEdges],
  );
 
  return <ReactFlow nodes={nodes} edges={edges} onConnect={onConnect} />;
}

Signature

Parameters:

Name	Type	Default
`edgeParams`	`EdgeType \| Connection` Either an `Edge` or a `Connection` you want to add.
`edges`	`EdgeType[]` The array of all current edges.

Returns:

EdgeType[]

A new array of edges with the new edge added.

Notes

If an edge with the same target and source already exists (and the same targetHandle and sourceHandle if those are set), then this util won’t add a new edge even if the id property is different.