ReactFlowInstance

Source on GitHub

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	Default
`getNodes`	`() => Node[]` Returns nodes.
`setNodes`	`(payload: Node[] \| ((nodes: Node[]) => Node[])) => 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.
`addNodes`	`(payload: Node \| Node[]) => void` Add one or many nodes to your existing nodes array. Calling this function will trigger the `onNodesChange` handler in a controlled flow.
`getNode`	`(id: string) => Node \| undefined` Returns a node by id.
`getInternalNode`	`(id: string) => InternalNode<Node> \| undefined` Returns an internal node by id.
`getEdges`	`() => Edge[]` Returns edges.
`setEdges`	`(payload: Edge[] \| ((edges: Edge[]) => Edge[])) => 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.
`addEdges`	`(payload: Edge \| Edge[]) => void` Add one or many edges to your existing edges array. Calling this function will trigger the `onEdgesChange` handler in a controlled flow.
`getEdge`	`(id: string) => Edge \| undefined` Returns an edge by id.
`toObject`	`() => ReactFlowJsonObject<Node, Edge>` Returns the nodes, edges and the viewport as a JSON object.
`deleteElements`	`(params: DeleteElementsOptions) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[]; }>` Deletes nodes and edges.
`updateNode`	`(id: string, nodeUpdate: Partial<Node> \| ((node: Node) => Partial<Node>), options?: { replace: boolean; } \| undefined) => void` Updates a node.
`updateNodeData`	`(id: string, dataUpdate: Partial<Record<string, unknown>> \| ((node: Node) => Partial<Record<string, unknown>>), options?: { replace: boolean; } \| undefined) => void` Updates the data attribute of a node.
`updateEdge`	`(id: string, edgeUpdate: Partial<Edge> \| ((edge: Edge) => Partial<Edge>), options?: { replace: boolean; } \| undefined) => void` Updates an edge.
`updateEdgeData`	`(id: string, dataUpdate: Partial<Record<string, unknown> \| undefined> \| ((edge: Edge) => Partial<Record<string, unknown> \| undefined>), options?: { ...; } \| undefined) => void` Updates the data attribute of a edge.
`getNodesBounds`	`(nodes: (string \| Node \| InternalNode)[]) => Rect` Returns the bounds of the given nodes or node ids.
`getHandleConnections`	`({ type, id, nodeId, }: { 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'`.
`getNodeConnections`	`({ type, handleId, nodeId, }: { type?: HandleType; nodeId: string; handleId?: string \| null; }) => NodeConnection[]` Gets all connections to a node. Can be filtered by handle type and id.

Intersections

Name	Type	Default
`getIntersectingNodes`	`(node: Node \| Rect \| { id: string; }, partially?: boolean \| undefined, nodes?: Node[] \| undefined) => Node[]` 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: Node \| Rect \| { id: string; }, area: Rect, partially?: boolean \| undefined) => 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

Name	Type	Default
`zoomIn`	`ZoomInOut` Zooms viewport in by 1.2.
`zoomOut`	`ZoomInOut` Zooms viewport out by 1 / 1.2.
`zoomTo`	`ZoomTo` Zoom the viewport to a given zoom level. Passing in a `duration` will animate the viewport to the new zoom level.
`getZoom`	`GetZoom` Get the current zoom level of the viewport.
`setViewport`	`SetViewport` Sets the current viewport.
`getViewport`	`GetViewport` Returns the current viewport.
`setCenter`	`SetCenter` Center the viewport on a given position. Passing in a `duration` will animate the viewport to the new position.
`fitBounds`	`FitBounds` A low-level utility function to fit the viewport to a given rectangle. By passing 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`	`(clientPosition: XYPosition, options?: { snapToGrid: boolean; } \| undefined) => XYPosition` With this function you can translate a screen pixel position to a flow position. It is useful for implementing drag and drop from a sidebar for example.
`flowToScreenPosition`	`(flowPosition: XYPosition) => XYPosition` Translate a position inside the flow’s canvas to a screen pixel position.
`viewportInitialized`	`boolean` React Flow needs to mount the viewport to the DOM and initialize its zoom and pan behavior. This property tells you when viewport is initialized.
`fitView`	`FitView<Node>`