ReactFlowInstance
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
Name | Type | Default |
---|---|---|
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 | |
addNodes | (payload: Node | Node[]) => void Add one or many nodes to your existing nodes array. Calling this function will trigger the
| |
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 | |
addEdges | (payload: Edge | Edge[]) => void Add one or many edges to your existing edges array. Calling this function will trigger the
| |
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
| |
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
Name | Type | Default |
---|---|---|
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 | |
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 |
Viewport
Name | Type | Default |
---|---|---|
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 | |
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 | |
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
| |
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. | |
viewportInitialized | boolean 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> |