Skip to main content

ReactFlow Instance

You can receive a reactFlowInstance by using the onInit callback or the useReactFlow hook:

The reactFlowInstance has the following functions:

Nodes and Edges

getNodes

Description:
Return array of nodes
Type:
() => Node[]

getNode

Description:
Return a node by id
Type:
(id: string) => Node | undefined

setNodes

Description:
Set nodes array
Type:
(nodes: Node[] | (nodes: Node[]) => Node[]) => void

addNodes

Description:
Add one or multiple nodes
Type:
(nodes: Node | Node[]): void

getEdges

Description:
Return array of edges
Type:
() => Edge[]

getEdge

Description:
Return a edge by id
Type:
(id: string) => Edge | undefined

setEdges

Description:
Set edges array
Type:
(edges: Edge[] | (edges: Edge[]) => Edge[])=> void

addEdges

Description:
Add one or multiple edges
Type:
(edges: Edge | Edge[]) => void

toObject

Description:
Return nodes, edges and viewport

deleteElements

The deleteElements method is available from version 11.2 onwards.

Description:
Deletes the passed nodes and edges. All connected edges of the passed nodes get deleted automatically.
Type:
({ nodes, edges }: { nodes?: Node[], edges?: Edge[] }) => void

Intersections

isNodeIntersecting

Description:
Returns true if the passed node intersects with the passed area
Type:
(nodeOrRect: NodeRect, area: Rect, partially?: boolean) => boolean

getIntersectingNodes

Description:
Returns all nodes that intersect with the passed node. Optionally you can pass a set of nodes if you don't want to check all nodes.
Type:
(nodeOrRect: NodeRect, partially?: boolean, nodes?: Node[]) => Node[]

Viewport

fitBounds

Description:
Fits the pane to the passed bounds (object with width x, y, width and height: { x: 0, y: 0, width: 100, height: 100 })
Type:
(bounds: Rect, options?: FitBoundsOptions) => void

fitView

Description:
Fit the view to the nodes on the pane. `padding` is `0.1` and `includeHiddenNodes` is `false` by default
Type:
(options?: FitViewOptions) => void

zoomIn

Description:
Zoom in
Type:
(options?: ViewportHelperFunctionOptions) => void

zoomOut

Description:
Zoom out
Type:
(options?: ViewportHelperFunctionOptions) => void

zoomTo

Description:
Zoom to passed zoom level
Type:
(zoomLevel: number, options?: ViewportHelperFunctionOptions) => void

getZoom

Description:
Return the current zoom level
Type:
() => number

setViewport

Description:
Set the viewport of the pane
Type:
(viewport: Viewport, options?: ViewportHelperFunctionOptions) => void

getViewport

Description:
Return current viewport
Type:
() => Viewport

setCenter

Description:
Set the center to the passed params. If no zoom is passed, maxZoom is used
Type:
(x: number, y: number, options?: SetCenterOptions) => void

project

Description:
Transforms pixel coordinates to the internal ReactFlow coordinate system. This can be used when you drag nodes (from a side bar for example) and need the internal position on the pane.
Type:

viewportInitialized

Description:
Boolean property to determine if React Flow has been initialized with all its event listeners
Type:
boolean