Skip to Content
ReferenceTypes

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

NameTypeDefault
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

NameTypeDefault
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

NameTypeDefault
zoomIn(options?: ViewportHelperFunctionOptions) => Promise<boolean>

Zooms viewport in by 1.2.

zoomOut(options?: ViewportHelperFunctionOptions) => Promise<boolean>

Zooms viewport out by 1 / 1.2.

zoomTo(zoomLevel: number, options?: ViewportHelperFunctionOptions) => Promise<boolean>

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?: ViewportHelperFunctionOptions) => Promise<boolean>

Sets the current viewport.

getViewport() => Viewport

Returns the current viewport.

setCenter(x: number, y: number, options?: SetCenterOptions) => Promise<boolean>

Center the viewport on a given position. Passing in a duration will animate the viewport to the new position.

fitBounds(bounds: Rect, options?: FitBoundsOptions) => Promise<boolean>

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.

viewportInitializedboolean

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(fitViewOptions?: FitViewOptions<NodeType>) => Promise<boolean>
Last updated on