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.

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?: { duration?: number; ease?: (t: number) => number; interpolate?: 'smooth' | 'linear'; }) => Promise<boolean>

Zooms viewport in by 1.2.

zoomOut(options?: { duration?: number; ease?: (t: number) => number; interpolate?: 'smooth' | 'linear'; }) => Promise<boolean>

Zooms viewport out by 1 / 1.2.

zoomTo(zoomLevel: number, options?: { duration?: number; ease?: (t: number) => number; interpolate?: 'smooth' | 'linear'; }) => 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?: { duration?: number; ease?: (t: number) => number; interpolate?: 'smooth' | 'linear'; }) => Promise<boolean>

Sets the current viewport.

getViewport() => Viewport

Returns the current viewport.

setCenter(x: number, y: number, options?: ViewportHelperFunctionOptions & { zoom?: number; }) => 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?: ViewportHelperFunctionOptions & { padding?: number; }) => 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?: FitViewOptionsBase<NodeType>) => Promise<boolean>
Last updated on