ReactFlowInstance<T, U>

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;
 
  // 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;
  // @deprecated Use `screenToFlowPosition`.
  project: (position: { x: number; y: number }) => { x: number; y: number };
  screenToFlowPosition: (position: { x: number; y: number }) => {
    x: number;
    y: number;
  };
  flowToScreenPosition: (position: { x: number; y: number }) => {
    x: number;
    y: number;
  };
};

Fields

Nodes and edges

Name	Type
#`getNode`	`(id: string) => Node<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`	`(payload: { nodes?: (Partial<Node> & { id: Node["id"] })[]; edges?: (Partial<Edge> & { id: Edge["id"] })[]; }) => void` Remove multiple nodes and edges from a flow at once. Any nodes and edges in the flow found with ids that match those in the payload will be removed. This will trigger both the onNodesChange and onEdgesChange handlers in a controlled flow.

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.
#`project`	`(position: { x: number; y: number; }) => { x: number; y: number; }` ⚠️ This function is deprecated and will be removed in v12. Please use screenToFlowPosition instead. When using screenToFlowPosition, you do not need to subtract the react flow bounds anymore.
#`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