ReactFlowInstance

Source on GitHub (opens in a new tab)

The ReactFlowInstance provides a collection of methods to query and manipulate the internal state of your flow. You can get an instance by using the useReactFlow hook or attaching a listener to the onInit event.

export type ReactFlowInstance<T, U> = {
  // Nodes and Edges
  getNode: (id: string) => Node<T> | undefined;
  getNodes: () => Node<T>[];
  addNodes: (payload: Node<T>[] | Node<T>) => void;
  setNodes: (payload: Node<T>[] | ((nodes: Node<T>[]) => Node<T>[])) => void;
 
  getEdge: (id: string) => Edge<U> | undefined;
  getEdges: () => Edge<U>[];
  addEdges: (payload: Edge<U>[] | Edge<U>) => void;
  setEdges: (payload: Edge<U>[] | ((edges: Edge<U>[]) => Edge<U>[])) => void;
 
  toObject: () => ReactFlowJsonObject<T, U>;
  deleteElements: (payload: {
    nodes?: (Partial<Node> & { id: Node['id'] })[];
    edges?: (Partial<Edge> & { id: Edge['id'] })[];
  }) => void;
  getNodesBounds: (nodes: (NodeType | InternalNode | string)[]) => Rect;
 
  // Intersections
  getIntersectingNodes: (
    node: (Partial<Node<T>> & { id: Node['id'] }) | Rect,
    partially?: boolean,
    nodes?: Node<T>[],
  ) => Node<T>[];
 
  isNodeIntersecting: (
    node: (Partial<Node<T>> & { id: Node['id'] }) | Rect,
    area: Rect,
    partially?: boolean,
  ) => boolean;
 
  // Viewport
  viewportInitialized: boolean;
  zoomIn: (options?: { duration: number }) => void;
  zoomOut: (options?: { duration: number }) => void;
  zoomTo: (zoomLevel: number, options?: { duration: number }) => void;
  getZoom: () => number;
  setViewport: (viewport: Viewport, options?: { duration: number }) => void;
  getViewport: () => Viewport;
  fitView: (fitViewOptions?: FitViewOptions) => boolean;
  setCenter: (
    x: number,
    y: number,
    options?: { duration: number; zoom: number },
  ) => void;
  fitBounds: (
    bounds: Rect,
    options?: { duration: number; padding: number },
  ) => void;
  screenToFlowPosition: (position: { x: number; y: number }) => {
    x: number;
    y: number;
  };
  flowToScreenPosition: (position: { x: number; y: number }) => {
    x: number;
    y: number;
  };
  updateNode: (
    id: string,
    nodeUpdate: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>),
    options?: { replace: boolean },
  ) => void;
  updateNodeData: (
    id: string,
    dataUpdate:
      | Partial<NodeType>['data']
      | ((node: Node) => 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']
      | ((node: Edge) => Partial<EdgeType>['data']),
    options?: { replace: boolean },
  ) => void;
};

Fields

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`
#`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

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.

ProOptions ReactFlowJsonObject