📣 Take the 2024 React Flow Developer Survey
ReferenceHooks
useReactFlow()

useReactFlow

Source on GitHub

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

#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
#getHandleConnections
({ type, nodeId, id }: { type: HandleType, nodeId: string, id?: string | null }) => HandleConnection[]
Get all the connections of a handle belonging to a specific node. The type parameter be either 'source' or 'target'.
#getNodesBounds
(nodes: (NodeType | InternalNode | string)[]) => Rect
Returns the bounds of the given nodes or node ids.

Intersections

#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

#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

HooksUtils