Skip to Content

2023-11-02

New "prevent connection cycles" example!

Hayleigh Thompson
Software Engineer

The “Prevent connection cycles” example shows how to use the getOutgoers util to check if a new connection would cause a cycle in the flow. Check it out here.

import React, { useCallback } from 'react'; import { ReactFlow, Background, useNodesState, useEdgesState, addEdge, getOutgoers, useReactFlow, ReactFlowProvider, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; import { nodes as initialNodes, edges as initialEdges, } from './initialElements'; const Flow = () => { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const { getNodes, getEdges } = useReactFlow(); const isValidConnection = useCallback( (connection) => { // we are using getNodes and getEdges helpers here // to make sure we create isValidConnection function only once const nodes = getNodes(); const edges = getEdges(); const target = nodes.find((node) => node.id === connection.target); const hasCycle = (node, visited = new Set()) => { if (visited.has(node.id)) return false; visited.add(node.id); for (const outgoer of getOutgoers(node, nodes, edges)) { if (outgoer.id === connection.source) return true; if (hasCycle(outgoer, visited)) return true; } }; if (target.id === connection.source) return false; return !hasCycle(target); }, [getNodes, getEdges], ); const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), ); return ( <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} isValidConnection={isValidConnection} fitView > <Background /> </ReactFlow> ); }; export default () => ( <ReactFlowProvider> <Flow /> </ReactFlowProvider> );

Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro

Last updated on