useReactFlow()

此钩子返回一个 ReactFlowInstance，可用于更新节点和边缘、操作视口或查询流的当前状态。

¥This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.


import { useCallback, useState } from 'react';
import { useReactFlow } from '@xyflow/react';
 
export function NodeCounter() {
  const reactFlow = useReactFlow();
  const [count, setCount] = useState(0);
  const countNodes = useCallback(() => {
    setCount(reactFlow.getNodes().length);
    // you need to pass it as a dependency if you are using it with useEffect or useCallback
    // because at the first render, it's not initialized yet and some functions might not work.
  }, [reactFlow]);
 
  return (
    <div>
      <button onClick={countNodes}>Update count</button>
      <p>There are {count} nodes in the flow.</p>
    </div>
  );
}

签名

¥Signature

节点和边

¥Nodes and edges

Name	Type
#`getNode`	`(id: string) => Node<T> \| undefined`
#`getInternalNode`	`(id: string) => InternalNode<T> \| undefined`
#`getNodes`	`() => Node<T>[]`
#`addNodes`	`(payload: Node<T>[] \| Node<T>) => void` Add one or many nodes to your existing nodes array. Calling this function will trigger the onNodesChange handler in a controlled flow.
#`setNodes`	`(payload: Node<T>[] \| ((nodes: Node<T>[]) => Node<T>[])) => 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 onNodesChange handler in a controlled flow.
#`getEdge`	`(id: string) => Edge<U> \| undefined`
#`getEdges`	`() => Edge<U>[]`
#`addEdges`	`(payload: Edge<U>[] \| Edge<U>) => void` Add one or many edges to your existing edges array. Calling this function will trigger the onEdgesChange handler in a controlled flow.
#`setEdges`	`(payload: Edge<U>[] \| ((edges: Edge<U>[]) => Edge<U>[])) => 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 onEdgesChange handler in a controlled flow.
#`toObject`	`() => ReactFlowJsonObject<T, U>` This function returns a JSON representation of your current React Flow graph.
#`deleteElements`	`DeleteElements`
#`updateNode`	`(id: string, nodeUpdate: Partial<NodeType> \| ((node: NodeType) => Partial<NodeType>), options?: { replace: boolean }) => void`
#`updateNodeData`	`(id: string, dataUpdate: Partial<NodeType['data']> \| ((edge: NodeType) => Partial<NodeType['data']>), options?: { replace: boolean }) => void`
#`updateEdge`	`(id: string, edgeUpdate: Partial<EdgeType> \| ((node: EdgeType) => Partial<EdgeType>), options?: { replace: boolean }) => void`
#`updateEdgeData`	`(id: string, dataUpdate: Partial<EdgeType['data']> \| ((edge: EdgeType) => Partial<EdgeType['data']>), options?: { replace: boolean }) => void`
#`getHandleConnections`	`({ type, nodeId, id }: { 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 'source' or 'target'.
#`getNodeConnections`	`({ nodeId, type, handleId }: { nodeId: string, type?: HandleType, handleId?: string \| null }) => NodeConnection[]` Get all the connections to a specific node. Can be filtered by handle type or id.
#`getNodesBounds`	`(nodes: (NodeType \| InternalNode \| string)[]) => Rect` Returns the bounds of the given nodes or node ids.
#`getNodeConnections`	`({type?: HandleType, nodeId: string, handleId?: string \| null }) => NodeConnection[]` Get all the connections to a specific node. Can be filtered by handle type or id.

交叉点

¥Intersections

Name	Type
#`getIntersectingNodes`	`(node: (Partial<Node<T>> & { id: Node["id"] }) \| Rect, partially?: boolean, nodes?: Node<T>[]) => Node<T>[]` Find all the nodes currently intersecting with a given node or rectangle. The partially parameter can be set to true to include nodes that are only partially intersecting.
#`isNodeIntersecting`	`(node: (Partial<Node<T>> & { id: Node["id"] }) \| Rect, area: Rect, partially?: boolean) => boolean` Determine if a given node or rectangle is intersecting with another rectangle. The partially parameter can be set to true return true even if the node is only partially intersecting.

视口字段

¥Viewport fields

Name	Type
#`viewportInitialized`	`boolean` React Flow needs to mount the viewport to the DOM and initialize its zoom and pan behavior. This property tells you when
#`zoomIn`	`(options?: { duration: number; }) => void`
#`zoomOut`	`(options?: { duration: number; }) => void`
#`zoomTo`	`(zoomLevel: number, options?: { duration: number; }) => void` Zoom the viewport to a given zoom level. Passing in a duration will animate the viewport to the new zoom level.
#`getZoom`	`() => number` Get the current zoom level of the viewport.
#`setViewport`	`(viewport: Viewport, options?: { duration: number; }) => void`
#`getViewport`	`() => Viewport`
#`fitView`	`(fitViewOptions?: FitViewOptions) => boolean`
#`setCenter`	`(x: number, y: number, options?: { duration: number, zoom: number; }) => void` Center the viewport on a given position. Passing in a duration will animate the viewport to the new position.
#`fitBounds`	`(bounds: Rect, options?: { duration: number, padding: number; }) => void` A low-level utility function to fit the viewport to a given rectangle. By passing in a duration, the viewport will animate from its current position to the new position. The padding option can be used to add space around the bounds.
#`screenToFlowPosition`	`(position: { x: number; y: number; }) => { x: number; y: number; }` 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`	`(position: { x: number; y: number; }) => { x: number; y: number; }` Translate a position inside the flow's canvas to a screen pixel position.

Typescript

此钩子接受自定义节点和边缘类型的泛型类型参数。有关更多信息，请参阅此我们的 Typescript 指南中的部分。

¥This hook accepts a generic type argument of custom node & edge types. See this section in our Typescript guide for more information.


const reactFlow = useReactFlow<CustomNodeType, CustomEdgeType>();

注释

¥Notes

此钩子只能在作为 <ReactFlowProvider /> 或 <ReactFlow /> 组件的子组件中使用。

¥This hook can only be used in a component that is a child of a <ReactFlowProvider /> or a <ReactFlow /> component.
与 useNodes 或 useEdges 不同，此钩子不会导致你的组件在状态更改时重新渲染。相反，你可以在需要时通过使用此钩子返回的 ReactFlowInstance 上的方法来查询状态。

¥Unlike useNodes or useEdges, this hook won’t cause your component to re-render when state changes. Instead, you can query the state when you need it by using methods on the ReactFlowInstance this hook returns.