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
addNodes
getEdges
Description:
Return array of edges
Type:
() => Edge[]
getEdge
Description:
Return a edge by id
Type:
(id: string) => Edge | undefined
setEdges
addEdges
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.
Intersections
isNodeIntersecting
Description:
Returns true if the passed node intersects with the passed area
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.
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