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​

Returns array of nodes.

getNodes(): Node[]

getNode​

Returns a node by id.

getNode(id: string): Node | undefined

setNodes​

Sets nodes array.

setNodes(nodes: Node[] | (nodes: Node[]) => Node[]): void

addNodes​

Adds one or multiple nodes

addNodes(nodes: Node | Node[]): void

getEdges​

Returns array of edges.

getEdges(): Edge[]

getEdge​

Returns a edge by id.

getEdge(id: string): Edge | undefined

setEdges​

Sets edges array.

setEdges(edges: Edge[] | (edges: Edge[]) => Edge[]): void

addEdges​

Adds one or multiple edges.

addEdges(edges: Edge | Edge[]): void

toObject​

Returns nodes, edges and viewport.

toObject(): { nodes, edges, viewport }: ReactFlowJsonObject

Viewport​

fitBounds​

Fits the pane to the passed bounds (object with width x, y, width and height: { x: 0, y: 0, width: 100, height: 100 })

fitBounds({ x, y, width, height }: Rect, { padding, duration }?: FitBoundsOptions): void

fitView​

Fits the view to the nodes on the pane. padding is 0.1 and includeHiddenNodes is false by default.

fitView({ padding: number, includeHiddenNodes: boolean }?: FitViewOptions): void

zoomIn​

Zooms in.

zoomIn({ duration }?: ViewportHelperFunctionOptions): void

zoomOut​

Zooms out.

zoomOut({ duration }?: ViewportHelperFunctionOptions): void

zoomTo​

Zooms to passed zoom level.

zoomTo(zoomLevel: number, { duration }?: ViewportHelperFunctionOptions): void

getZoom​

Returns the current zoom level.

getZoom(): number

setViewport​

Sets the viewport of the pane.

setViewport({ x, y, zoom }: Viewport, { duration }?: ViewportHelperFunctionOptions): void

getViewport​

Returns the viewport of the pane.

getViewport(): { x, y, zoom }: Viewport

setCenter​

Sets the center to the passed params. If no zoom is passed the maxZoom is used.

setCenter(x: number, y: number, { zoom, duration }?: SetCenterOptions): void

project​

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.

({ x, y }: XYPosition): { x, y }: XYPosition

viewportInitialized​

Boolean property to determine if React Flow has been initialized with all its event listeners.