useReactFlow

Source on GitHub (opens in a new tab)

This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.

import { useCallback, useState } from 'react';
import { useReactFlow } from '@xyflow/react';
 
export function NodeCounter() {
  const reactFlow = useReactFlow();
  const [count, setCount] = useState(0);
  const countNodes = useCallback(() => {
    setCount(reactFlow.getNodes().length);
    // you need to pass it as a dependency if you are using it with useEffect or useCallback
    // because at the first render, it's not initialized yet and some functions might not work.
  }, [reactFlow]);
 
  return (
    <div>
      <button onClick={countNodes}>Update count</button>
      <p>There are {count} nodes in the flow.</p>
    </div>
  );
}

Signature

Nodes and edges

Name	Type
#`getNode`	`(id: string) => Node<T> \| undefined`
#`getInternalNode`	`(id: string) => InternalNode<T> \| undefined`
#`getNodes`	`() => Node<T>[]`
#`addNodes`	`(payload: Node<T>[] \| Node<T>) => void` Add one or many nodes to your existing nodes array. Calling this function will trigger the onNodesChange handler in a controlled flow.
#`setNodes`	`(payload: Node<T>[] \| ((nodes: Node<T>[]) => Node<T>[])) => void` Set your nodes array to something else by either overwriting it with a new array or by passing in a function to update the existing array. If using a function, it is important to make sure a new array is returned instead of mutating the existing array. Calling this function will trigger the onNodesChange handler in a controlled flow.
#`getEdge`	`(id: string) => Edge<U> \| undefined`
#`getEdges`	`() => Edge<U>[]`
#`addEdges`	`(payload: Edge<U>[] \| Edge<U>) => void` Add one or many edges to your existing edges array. Calling this function will trigger the onEdgesChange handler in a controlled flow.
#`setEdges`	`(payload: Edge<U>[] \| ((edges: Edge<U>[]) => Edge<U>[])) => void` Set your edges array to something else by either overwriting it with a new array or by passing in a function to update the existing array. If using a function, it is important to make sure a new array is returned instead of mutating the existing array. Calling this function will trigger the onEdgesChange handler in a controlled flow.
#`toObject`	`() => ReactFlowJsonObject<T, U>` This function returns a JSON representation of your current React Flow graph.
#`deleteElements`	`DeleteElements`
#`updateNode`	`(id: string, nodeUpdate: Partial<NodeType> \| ((node: NodeType) => Partial<NodeType>), options?: { replace: boolean }) => void`
#`updateNodeData`	`( id: string, dataUpdate: Partial<NodeType['data']> \| ((edge: NodeType) => Partial<NodeType['data']>), options?: { replace: boolean }) => void`
#`updateEdge`	`(id: string, edgeUpdate: Partial<EdgeType> \| ((node: EdgeType) => Partial<EdgeType>), options?: { replace: boolean }) => void`
#`updateEdgeData`	`( id: string, dataUpdate: Partial<EdgeType['data']> \| ((edge: EdgeType) => Partial<EdgeType['data']>), options?: { replace: boolean }) => void`

Intersections

Name	Type
#`getIntersectingNodes`	`(node: (Partial<Node<T>> & { id: Node["id"] }) \| Rect, partially?: boolean, nodes?: Node<T>[]) => Node<T>[]` Find all the nodes currently intersecting with a given node or rectangle. The partially parameter can be set to true to include nodes that are only partially intersecting.
#`isNodeIntersecting`	`(node: (Partial<Node<T>> & { id: Node["id"] }) \| Rect, area: Rect, partially?: boolean) => boolean` Determine if a given node or rectangle is intersecting with another rectangle. The partially parameter can be set to true return true even if the node is only partially intersecting.

Viewport fields

Name	Type
#`viewportInitialized`	`boolean` React Flow needs to mount the viewport to the DOM and initialize its zoom and pan behaviour. This property tells you when
#`zoomIn`	`(options?: { duration: number; }) => void`
#`zoomOut`	`(options?: { duration: number; }) => void`
#`zoomTo`	`(zoomLevel: number, options?: { duration: number; }) => void` Zoom the viewport to a given zoom level. Passing in a duration will animate the viewport to the new zoom level.
#`getZoom`	`() => number` Get the current zoom level of the viewport.
#`setViewport`	`(viewport: Viewport, options?: { duration: number; }) => void`
#`getViewport`	`() => Viewport`
#`fitView`	`(fitViewOptions?: FitViewOptions) => boolean`
#`setCenter`	`(x: number, y: number, options?: { duration: number, zoom: number; }) => void` Center the viewport on a given position. Passing in a duration will animate the viewport to the new position.
#`fitBounds`	`(bounds: Rect, options?: { duration: number, padding: number; }) => void` A low-level utility function to fit the viewport to a given rectangle. By pasing in a duration, the viewport will animate from its current position to the new position. The padding option can be used to add space around the bounds.
#`screenToFlowPosition`	`(position: { x: number; y: number; }) => { x: number; y: number; }` With this function you can translate a screen pixel position to a flow position. It is useful for implemting drag and drop from a sidebar for example.
#`flowToScreenPosition`	`(position: { x: number; y: number; }) => { x: number; y: number; }` Translate a position inside the flow's canvas to a screen pixel position.

Typescript

This hook accepts a generic type argument of custom node & edge types. See this section in our Typescript guide for more information.

const reactFlow = useReactFlow<CustomNodeType, CustomEdgeType>();

Notes

This hook can only be used in a component that is a child of a <ReactFlowProvider /> or a <ReactFlow /> component.
Unlike useNodes or useEdges, this hook won't cause your component to re-render when state changes. Instead, you can query the state when you need it by using methods on the ReactFlowInstance this hook returns.

useOnViewportChange()useStore()