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
Type:
() => ReactFlowJsonObject

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: Node | Rect, 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: Node | Rect, partially?: boolean, nodes?: Node[]) => Node[]

Viewport​

fitBounds​

Description:
Fits the view 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:
(xy: XYPosition) => XYPosition

viewportInitialized​

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