useReactFlow

このフックは、ノードとエッジの更新、ビューポートの操作、またはフローの現在の状態のクエリに使用できるReactFlowInstanceを返します。

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>
  );
}

シグネチャ

ノードとエッジ

名前	型
#`getNode`	`(id: string) => Node<T> \| undefined`
#`getInternalNode`	`(id: string) => InternalNode<T> \| undefined`
#`getNodes`	`() => Node<T>[]`
#`addNodes`	`(payload: Node<T>[] \| Node<T>) => void` 既存のノード配列に1つ以上のノードを追加します。この関数を呼び出すと、制御されたフローではonNodesChangeハンドラがトリガーされます。
#`setNodes`	`(payload: Node<T>[] \| ((nodes: Node<T>[]) => Node<T>[])) => void` 新しい配列で上書きするか、既存の配列を更新する関数を渡すことで、ノード配列を別のものに変更します。関数を用いる場合、既存の配列を直接変更するのではなく、新しい配列を返すようにすることが重要です。この関数を呼び出すと、制御されたフローではonNodesChangeハンドラがトリガーされます。
#`getEdge`	`(id: string) => Edge<U> \| undefined`
#`getEdges`	`() => Edge<U>[]`
#`addEdges`	`(payload: Edge<U>[] \| Edge<U>) => void` 既存のエッジ配列に1つ以上のエッジを追加します。この関数を呼び出すと、制御されたフローではonEdgesChangeハンドラがトリガーされます。
#`setEdges`	`(payload: Edge<U>[] \| ((edges: Edge<U>[]) => Edge<U>[])) => void` 新しい配列で上書きするか、既存の配列を更新する関数を渡すことで、エッジ配列を別のものに変更します。関数を用いる場合、既存の配列を直接変更するのではなく、新しい配列を返すようにすることが重要です。この関数を呼び出すと、制御されたフローではonEdgesChangeハンドラがトリガーされます。
#`toObject`	`() => ReactFlowJsonObject<T, U>` この関数は、現在のReact FlowグラフのJSON表現を返します。
#`deleteElements`	`DeleteElements`
#`updateNode`	`(id: string, nodeUpdate: Partial<NodeType> \| ((ノード: NodeType) => Partial<NodeType>), オプション?: { 置換: ブール値 }) => void`
#`updateNodeData`	`(id: string, dataUpdate: Partial<NodeType['データ']> \| ((エッジ: NodeType) => Partial<NodeType['データ']>), オプション?: { 置換: ブール値 }) => void`
#`updateEdge`	`(id: string, edgeUpdate: Partial<EdgeType> \| ((ノード: EdgeType) => Partial<EdgeType>), オプション?: { 置換: ブール値 }) => void`
#`updateEdgeData`	`(id: string, dataUpdate: Partial<EdgeType['データ']> \| ((エッジ: EdgeType) => Partial<EdgeType['データ']>), オプション?: { 置換: ブール値 }) => void`
#`getHandleConnections`	`({ 型, nodeId, id }: { 型: HandleType, nodeId: string, id?: string \| null }) => HandleConnection[]` 特定のノードに属するハンドルのすべての接続を取得します。型パラメーターは「source」または「target」のいずれかです。
#`getNodesBounds`	`(nodes: (NodeType \| InternalNode \| string)[]) => Rect` 指定されたノードまたはノードIDのバウンディングボックスを返します。

交差

名前	型
#`getIntersectingNodes`	`(ノード: (Partial<Node<T>> & { id: Node["id"] }) \| Rect, 部分的?: ブール値, nodes?: Node<T>[]) => Node<T>[]` 指定されたノードまたは矩形と現在交差しているすべてのノードを見つけます。`partially`パラメーターを`true`に設定すると、部分的にのみ交差しているノードも含まれます。
#`isNodeIntersecting`	`(ノード: (Partial<Node<T>> & { id: Node["id"] }) \| Rect, 領域: Rect, 部分的?: ブール値) => ブール値` 指定されたノードまたは矩形が別の矩形と交差しているかどうかを判定します。`partially`パラメーターを`true`に設定すると、ノードが部分的にのみ交差していても`true`を返します。

ビューポートフィールド

名前	型
#`viewportInitialized`	`ブール値` React FlowはビューポートをDOMにマウントし、ズームとパンの動作を初期化する必要があります。このプロパティは、いつ
#`zoomIn`	`(オプション?: { 期間: 数値; }) => void`
#`zoomOut`	`(オプション?: { 期間: 数値; }) => void`
#`zoomTo`	`(ズームレベル: 数値, オプション?: { 期間: 数値; }) => void` ビューポートを指定されたズームレベルにズームします。期間を指定すると、ビューポートは新しいズームレベルにアニメーションします。
#`getZoom`	`() => 数値` ビューポートの現在のズームレベルを取得します。
#`setViewport`	`(ビューポート: Viewport, オプション?: { 期間: 数値; }) => void`
#`getViewport`	`() => Viewport`
#`fitView`	`(fitViewOptions?: FitViewOptions) => ブール値`
#`setCenter`	`(x: 数値, y: 数値, オプション?: { 期間: 数値, ズーム: 数値; }) => void` 指定された位置にビューポートの中心を合わせます。期間を指定すると、ビューポートは新しい位置にアニメーションします。
#`fitBounds`	`(バウンズ: Rect, オプション?: { 期間: 数値, パディング: 数値; }) => void` ビューポートを指定された矩形に合わせるための低レベルユーティリティ関数です。期間を指定することで、ビューポートは現在の位置から新しい位置にアニメーションします。`padding`オプションを使用して、バウンズ周辺にスペースを追加できます。
#`screenToFlowPosition`	`(ポジション: { x: 数値; y: 数値; }) => { x: 数値; y: 数値; }` この関数を使用すると、画面ピクセル位置をフロー位置に変換できます。これは、たとえばサイドバーからのドラッグアンドドロップを実装するのに役立ちます。
#`flowToScreenPosition`	`(ポジション: { x: 数値; y: 数値; }) => { x: 数値; y: 数値; }` フローのキャンバス内の位置を画面ピクセル位置に変換します。

Typescript

このフックは、カスタムノードとエッジの型のジェネリック型引数を受け入れます。詳細については、Typescriptガイドのこのセクションを参照してください。

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

備考

このフックは、<ReactFlowProvider />または<ReactFlow />コンポーネントの子であるコンポーネントでのみ使用できます。
useNodesまたはuseEdgesとは異なり、このフックは状態が変更されたときにコンポーネントの再レンダリングを引き起こしません。代わりに、このフックが返すReactFlowInstanceのメソッドを使用して、必要に応じて状態をクエリできます。

Hooks Utils