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

Intersections

Name	Type
#`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 fields

Name	Type
#`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`
#`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; }`

ProOptions ReactFlowJsonObject