<ReactFlow />

<ReactFlow /> コンポーネントは、React Flow アプリケーションの中核です。ノードとエッジをレンダリングし、ユーザーインタラクションを処理し、非制御フローとして使用する場合、独自のステートを管理できます。

import { ReactFlow } from '@xyflow/react'
 
export default function Flow() {
  return <ReactFlow
    nodes={...}
    edges={...}
    onNodesChange={...}
    ...
  />
}

このコンポーネントは多くの異なるプロパティを受け取りますが、ほとんどはオプションです。見つけやすくするために、意味のあるグループに分類してドキュメント化しようとしました。

共通プロパティ

これらは、React Flow を使用する場合に最も頻繁に使用するプロパティです。カスタムノードを使用した制御フローを使用している場合は、これらのほとんどすべてを使用する可能性があります！

名前	型	デフォルト値
#`nodes`	`Node[]` 制御フローでレンダリングするノードの配列。	`[]`
#`edges`	`Edge[]` 制御フローでレンダリングするエッジの配列。	`[]`
#`defaultNodes`	`Node[]` 非制御フローでレンダリングする初期ノード。	`[]`
#`defaultEdges`	`Edge[]` 非制御フローでレンダリングする初期エッジ。	`[]`
#`onNodesChange`	`(変更: NodeChange[]) => void` このイベントハンドラーを使用して、制御フローにインタラクティブ性を持たせます。ノードのドラッグ、選択、移動時に呼び出されます。
#`onEdgesChange`	`(変更: EdgeChange[]) => void` このイベントハンドラーを使用して、制御フローにインタラクティブ性を持たせます。エッジの選択と削除時に呼び出されます。
#`onConnect`	`(接続: Connection) => void` 接続線が完了し、ユーザーによって2つのノードが接続されると、このイベントは新しい接続と共に発生します。addEdge ユーティリティを使用して、接続を完全なエッジに変換できます。
#`nodeTypes`	`レコード<文字列, React.ComponentType<NodeProps>>` フローでカスタムノードを使用する場合は、React Flow にそれらを知らせる必要があります。新しいノードをレンダリングする場合、React Flow はこのオブジェクトでノードの型を検索し、対応するコンポーネントをレンダリングします。	`{ input: InputNode, default: DefaultNode, output: OutputNode group: GroupNode }`
#`edgeTypes`	`レコード<文字列, React.ComponentType<EdgeProps>>` ノードタイプと同様に、このプロップを使用すると、エッジタイプをReactコンポーネントにマッピングすることで、フローでカスタムエッジを使用できます。	`{ default: BezierEdge, straight: StraightEdge, step: StepEdge, smoothstep: SmoothStepEdge simplebezier: SimpleBezier }`
#`nodeOrigin`	`[数値, 数値]` ノードをフロー内に配置する場合、またはノードのx座標とy座標を検索する場合に使用するノードの原点です。原点が[0,0]の場合、ノードの左上がx座標とy座標に配置されます。	`[0,0]`
#`nodeDragThreshold`	`数値` 0より大きいしきい値を設定すると、ノードのドラッグイベントを遅らせることができます。しきい値が1の場合、ドラッグイベントが発生する前にノードを1ピクセルドラッグする必要があります。デフォルト値は1なので、クリックによってドラッグイベントは発生しません。	`1`
#`nodeClickDistance`	`数値` mousedown/mouseup間のクリックをトリガーする最大距離です。	`0`
#`paneClickDistance`	`数値` mousedown/mouseup間のクリックをトリガーする最大距離です。	`0`
#`style`	`React.CSSProperties`
#`className`	`文字列`
#`proOptions`	`ProOptions` プロオプションは、Proサブスクライバー向けの構成設定です。誰でも自由に使用できます！
#`colorMode`	`"システム" \| "ライト" \| "ダーク"` React Flowには、ライトとダークの2つの組み込みカラースキームがあります。デフォルトでは、ユーザーのシステムカラースキームを採用しようとします。	`"system"`

ビューポートプロパティ

名前	型	デフォルト値
#`defaultViewport`	`Viewport` ビューポートの初期位置とズームを設定します。デフォルトのビューポートが提供されているがfitViewが有効になっている場合、デフォルトのビューポートは無視されます。	`{ x: 0, y: 0, zoom: 1 }`
#`viewport`	`Viewport` ビューポートプロップを渡すと、それは制御され、内部の変更を処理するためにonViewportChangeも渡す必要があります。	`{ x: 0, y: 0, zoom: 1 }`
#`onViewportChange`	`(ビューポート: Viewport) => void` 制御されたビューポートでユーザーのビューポートの状態を更新する場合に使用します。
#`fitView`	`ブール値` trueの場合、フローは、最初に提供されたすべてのノードに合うようにズームとパンされます。	`false`
#`fitViewOptions`	`FitViewOptions` 通常、ReactFlowInstanceでfitViewを呼び出す場合は、その動作をカスタマイズするためのオプションオブジェクトを提供できます。このプロップを使用すると、初期fitView呼び出しについても同様のことができます。
#`minZoom`	`数値`	`0.5`
#`maxZoom`	`数値`	`2`
#`snapToGrid`	`ブール値` 有効にすると、ノードはドラッグ時にグリッドにスナップします。	`false`
#`snapGrid`	`[数値, 数値]` snapToGridが有効になっている場合、このプロップはノードがスナップするグリッドを構成します。	`[25,25]`
#`onlyRenderVisibleElements`	`ブール値` この最適化を有効にすると、React Flowはビューポートに表示されるノードとエッジのみをレンダリングするように指示できます。	`false`
#`translateExtent`	`CoordinateExtent` デフォルトでは、ビューポートは無限に広がります。このプロップを使用して境界を設定できます。最初の座標のペアは左上の境界、2番目のペアは右下の境界です。	`[[-∞,-∞], [+∞,+∞]]`
#`nodeExtent`	`CoordinateExtent` translateExtentと同様に、このプロップを使用すると、ノードの配置を管理するための境界を設定できます。	`[[-∞,-∞], [+∞,+∞]]`
#`preventScrolling`	`ブール値` このプロップを無効にすると、ポインタがフロー上にある場合でも、ユーザーはページをスクロールできます。	`true`
#`attributionPosition`	`PanelPosition` デフォルトでは、React Flowはフローの右下に小さな表示をレンダリングします。別のものを配置したい場合は、このプロップを使用して位置を変更できます。	`"bottom-right"`

エッジプロパティ

名前	型	デフォルト値
#`elevateEdgesOnSelect`	`ブール値` このオプションを有効にすると、選択時にノードに接続されたエッジのz-indexが上昇します。	`false`
#`defaultMarkerColor`	`文字列`	`"#b1b1b7"`
#`defaultEdgeOptions`	`DefaultEdgeOptions` ここで設定されたデフォルトは、フローに追加されたすべての新規エッジに適用されます。新規エッジのプロパティは、存在する場合はこれらのデフォルトを上書きします。
#`reconnectRadius`	`数値` エッジの再接続をトリガーできるエッジ接続の周りの半径です。	`10`
#`edgesReconnectable`	`ブール値` エッジが作成された後に更新できるかどうか。このプロップがtrueであり、onReconnectハンドラーが提供されている場合、ユーザーは既存のエッジを新しいソースまたはターゲットにドラッグできます。個々のエッジは、それらのreconnectableプロパティでこの値を上書きできます。	`true`

イベントハンドラー

⚠️

コンポーネントの外側で、またはReactのuseCallbackフックを使用して、すべてのイベントハンドラーを定義することが重要です。そうでない場合、React Flowが無限の再レンダリングループに入る可能性があります！

一般的なイベント

名前	型
#`onInit`	`(インスタンス: ReactFlowInstance) => void` onInitコールバックは、ビューポートが初期化されると呼び出されます。この時点で、インスタンスを使用してfitViewやzoomToなどのメソッドを呼び出すことができます。
#`onError`	`(コード: 文字列, メッセージ: 文字列) => void` 時折、React Flowにエラーが発生する原因となることが起こる場合があります。アプリケーションをクラッシュさせる代わりに、コンソールにメッセージをログし、このイベントハンドラーを呼び出します。追加のログ記録やユーザーへのメッセージの表示などに使用できます。
#`onDelete`	`({ノード: Node[], エッジ: Edge[]}) => void` このハンドラーは、ノードまたはエッジが削除されると呼び出されます。
#`onBeforeDelete`	`({ノード: Node[], エッジ: Edge[]}) => Promise<ブール値 \| {ノード: Node[], エッジ: Edge[]}>` このハンドラは、ノードまたはエッジが削除されようとする前に呼び出されます。`false` を返すことで削除を中止したり、削除されるノードとエッジを変更したりできます。

ノードイベント

名前	型
#`onNodeClick`	`(event: React.MouseEvent,node: Node) => void`
#`onNodeDoubleClick`	`(event: React.MouseEvent,node: Node) => void`
#`onNodeDragStart`	`(event: React.MouseEvent,node: Node, ノード: Node[]) => void`
#`onNodeDrag`	`(event: React.MouseEvent,node: Node, ノード: Node[]) => void`
#`onNodeDragStop`	`(event: React.MouseEvent,node: Node, ノード: Node[]) => void`
#`onNodeMouseEnter`	`(event: React.MouseEvent,node: Node) => void`
#`onNodeMouseMove`	`(event: React.MouseEvent,node: Node) => void`
#`onNodeMouseLeave`	`(event: React.MouseEvent,node: Node) => void`
#`onNodeContextMenu`	`(event: React.MouseEvent,node: Node) => void`
#`onNodesDelete`	`(ノード: Node[]) => void`
#`onNodesChange`	`OnNodesChange` このイベントハンドラーを使用して、制御フローにインタラクティブ性を持たせます。ノードのドラッグ、選択、移動時に呼び出されます。

エッジイベント

名前	型
#`onEdgeClick`	`(event: React.MouseEvent,edge: Edge) => void`
#`onEdgeDoubleClick`	`(event: React.MouseEvent,edge: Edge) => void`
#`onEdgeMouseEnter`	`(event: React.MouseEvent,edge: Edge) => void`
#`onEdgeMouseMove`	`(event: React.MouseEvent,edge: Edge) => void`
#`onEdgeMouseLeave`	`(event: React.MouseEvent,edge: Edge) => void`
#`onEdgeContextMenu`	`(event: React.MouseEvent,edge: Edge) => void`
#`onReconnect`	`(oldEdge: Edge, newConnection: Connection) => void` このハンドラは、再接続可能なエッジのソースまたはターゲットが現在のノードからドラッグされたときに呼び出されます。エッジのソースまたはターゲットが最終的に変更されなくても、発生します。`reconnectEdge` ユーティリティを使用して、接続を新しいエッジに変換できます。
#`onReconnectStart`	`(event: React.MouseEvent,edge: Edge, handleType: "source" \| "target") => void` このイベントは、ユーザーが編集可能なエッジのソースまたはターゲットのドラッグを開始したときに発生します。
#`onReconnectEnd`	`(event: React.MouseEvent,edge: Edge, handleType: "source" \| "target", connectionState: Omit<ConnectionState, 'inProgress'>) => void` このイベントは、ユーザーが編集可能なエッジのソースまたはターゲットのドラッグを終了したときに発生します。エッジの更新が行われなくても呼び出されます。4番目の`connectionState`パラメータを使用して、再接続が失敗した場合に異なる動作を実現できます。
#`onEdgesDelete`	`(エッジ: Edge[]) => void`
#`onEdgesChange`	`OnEdgesChange` このイベントハンドラーを使用して、制御フローにインタラクティブ性を持たせます。エッジの選択と削除時に呼び出されます。

接続イベント

名前	型
#`onConnect`	`(接続: Connection) => void` 接続線が完了し、ユーザーによって2つのノードが接続されると、このイベントは新しい接続と共に発生します。addEdge ユーティリティを使用して、接続を完全なエッジに変換できます。
#`onConnectStart`	`(event: React.MouseEvent,params: { nodeId: 文字列 \| null; handleId: 文字列 \| null; handleType: "source" \| "target" \| null; }) => void`
#`onConnectEnd`	`(event: React.MouseEvent,connectionState: Omit<ConnectionState, 'inProgress'>) => void` このコールバックは、有効な接続が作成できたかどうかに関係なく発生します。2番目の`connectionState`パラメータを使用して、接続が失敗した場合に異なる動作を実現できます。
#`onClickConnectStart`	`(event: React.MouseEvent,params: { nodeId: 文字列 \| null; handleId: 文字列 \| null; handleType: "source" \| "target" \| null; }) => void`
#`onClickConnectEnd`	`(event: React.MouseEvent) =>void`
#`isValidConnection`	`(接続: Connection) => ブール値` このコールバックは、新しい接続の検証に使用できます。`false` を返すと、エッジはフローに追加されません。カスタム接続ロジックがある場合は、パフォーマンス上の理由から、ハンドルコンポーネントの`isValidConnection`プロパティよりもこのコールバックを使用することをお勧めします。

ペインイベント

名前	型
#`onMove`	`(event: React.MouseEvent \|React.TouchEvent \| null, data: Viewport) => void` このイベントハンドラは、ユーザーがビューポートをパンまたはズームしている間に呼び出されます。
#`onMoveStart`	`(event: React.MouseEvent \|React.TouchEvent \| null, data: Viewport) => void` このイベントハンドラは、ユーザーがビューポートのパンまたはズームを開始したときに呼び出されます。
#`onMoveEnd`	`(event: React.MouseEvent \|React.TouchEvent \| null, data: Viewport) => void` このイベントハンドラは、ユーザーがビューポートのパンまたはズームを停止したときに呼び出されます。
#`onPaneClick`	`(event: React.MouseEvent) =>void`
#`onPaneContextMenu`	`(event: React.MouseEvent) =>void`
#`onPaneScroll`	`(event: React.MouseEvent) =>void`
#`onPaneMouseMove`	`(event: React.MouseEvent) =>void`
#`onPaneMouseEnter`	`(event: React.MouseEvent) =>void`
#`onPaneMouseLeave`	`(event: React.MouseEvent) =>void`

選択イベント

名前	型
#`onSelectionChange`	`(params: { ノード: Node[]; エッジ: Edge[]; }) => void`
#`onSelectionDragStart`	`(event: React.MouseEvent,ノード: Node[]) => void`
#`onSelectionDrag`	`(event: React.MouseEvent,ノード: Node[]) => void`
#`onSelectionDragStop`	`(event: React.MouseEvent,ノード: Node[]) => void`
#`onSelectionStart`	`() => void`
#`onSelectionEnd`	`() => void`
#`onSelectionContextMenu`	`(event: React.MouseEvent,ノード: Node[]) => void` このイベントハンドラは、ノードの選択範囲を右クリックしたときに呼び出されます。

インタラクションプロパティ

名前	型	デフォルト値
#`nodesDraggable`	`ブール値` すべてのノードをドラッグ可能にするかどうかを制御します。個々のノードは、それらのdraggableプロパティを設定することで、この設定を上書きできます。ドラッグ不可能なノードでマウスハンドラを使用する場合は、それらのノードに「nopan」クラスを追加する必要があります。	`true`
#`nodesConnectable`	`ブール値` すべてのノードを接続可能にするかどうかを制御します。個々のノードは、それらのconnectableプロパティを設定することで、この設定を上書きできます。	`true`
#`nodesFocusable`	`ブール値` trueの場合、Tabキーでノード間のフォーカスを切り替え、Enterキーで選択できます。このオプションは、個々のノードのfocusableプロパティを設定することで上書きできます。	`true`
#`edgesFocusable`	`ブール値` trueの場合、Tabキーでエッジ間のフォーカスを切り替え、Enterキーで選択できます。このオプションは、個々のエッジのfocusableプロパティを設定することで上書きできます。	`true`
#`elementsSelectable`	`ブール値` trueの場合、要素（ノードとエッジ）をクリックして選択できます。このオプションは、個々の要素のselectableプロパティを設定することで上書きできます。	`true`
#`autoPanOnConnect`	`ブール値` trueの場合、接続を作成中にカーソルがビューポートの端まで移動すると、ビューポートが自動的にパンされます。	`true`
#`autoPanOnNodeDrag`	`ブール値` trueの場合、ノードをドラッグ中にカーソルがビューポートの端まで移動すると、ビューポートが自動的にパンされます。	`true`
#`autoPanSpeed`	`数値` autoPanOnNodeDragとautoPanOnConnectでビューポートがパンされる速度です。	`20`
#`panOnDrag`	`ブール値 \| (0 \| 1 \| 2 \| 3 \| 4)[]` このプロパティを有効にすると、クリックしてドラッグすることでビューポートをパンできます。また、このプロパティを数値の配列に設定して、パンをアクティブにできるマウスボタンを制限することもできます。たとえば、[0,2]は、左マウスボタンと右マウスボタンでのパンを許可します。	`true`
#`selectionOnDrag`	`ブール値`	`false`
#`selectionMode`	`"部分的" \| "完全"` "部分的"に設定されている場合、ユーザーがクリックしてドラッグして選択ボックスを作成すると、ボックスの一部しか含まれていないノードも選択されます。	`"full"`
#`panOnScroll`	`ブール値`	`false`
#`panOnScrollSpeed`	`数値`
#`panOnScrollMode`	`PanOnScrollMode` このプロパティは、panOnScrollが有効になっている場合のパンの方向を制限するために使用されます。「free」オプションは、任意の方向へのパンを許可します。	`PanOnScrollMode.Free`
#`zoomOnScroll`	`ブール値`	`true`
#`zoomOnPinch`	`ブール値`	`true`
#`zoomOnDoubleClick`	`ブール値`	`true`
#`selectNodesOnDrag`	`ブール値`	`true`
#`elevateNodesOnSelect`	`ブール値` このオプションを有効にすると、ノードが選択されたときにz-indexが上昇します。	`true`
#`connectOnClick`	`ブール値` connectOnClickオプションを使用すると、ソースハンドルをクリックまたはタップして接続を開始し、ターゲットハンドルをクリックして接続を完了できます。このオプションをfalseに設定すると、ユーザーは接続線をターゲットハンドルにドラッグして接続を作成する必要があります。	`true`
#`connectionMode`	`"緩い" \| "厳格な"` 緩い接続モードでは、任意の種類のハンドルを互いに接続できます。厳格なモードでは、ソースハンドルをターゲットハンドルにのみ接続できます。	`"strict"`

接続線プロパティ

名前	型	デフォルト値
#`connectionRadius`	`数値` 新しいエッジを作成するために接続線をドロップするハンドルの周囲の半径です。	`20`
#`connectionLineType`	`ConnectionLineType` 接続線に使用するエッジパスの種類です。作成されたエッジは任意の種類にすることができますが、React Flowはエッジが作成される前に、接続線にレンダリングするパスの種類を知る必要があります。	`ConnectionLineType.Bezier`
#`connectionLineStyle`	`React.CSSProperties`
#`connectionLineComponent`	`React.ComponentType<ConnectionLineComponentProps>`
#`connectionLineWrapperStyles`	`React.CSSProperties`

キーボードプロパティ

React Flowでは、フローとの対話方法として、いくつかの異なるキーボードショートカットを渡すことができます。バックスペースキーで選択されたノードまたはエッジを削除するなど、適切なデフォルト設定を行うように努めていますが、これらのプロパティを使用して独自のショートカットを設定できます。

これらのショートカットを無効にするには、無効にしたいプロパティにnullを渡します。

名前	型	デフォルト値
#`deleteKeyCode`	`文字列 \| 文字列[] \| null` 設定されている場合、キーまたはコードを押すと、選択されているノードとエッジが削除されます。配列を渡すと、押すことができる複数のキーを表します。たとえば、["Delete", "Backspace"]は、いずれかのキーを押すと選択された要素を削除します。	`"Backspace"`
#`selectionKeyCode`	`文字列 \| 文字列[] \| null` このプロパティを設定すると、このキーを押しながらクリック＆ドラッグすることで、複数のノードとエッジを囲む選択ボックスを描画できます。配列を渡すと、複数のキーを押すことができます。例えば、`["Shift", "Meta"]` とすると、ShiftキーまたはMetaキーのいずれかが押されているときに選択ボックスを描画できます。	`"Shift"`
#`multiSelectionKeyCode`	`文字列 \| 文字列[] \| null`	`"Meta" for MacOs, "Control" for other systems`
#`zoomActivationKeyCode`	`文字列 \| 文字列[] \| null` キーが設定されている場合、`panOnScroll` が `false` に設定されている場合でも、そのキーを押している間はビューポートをズームできます。このプロパティを `null` に設定することで、この機能を無効にできます。	`"Meta" for MacOs, "Control" for other systems`
#`panActivationKeyCode`	`文字列 \| 文字列[] \| null` キーが設定されている場合、`panOnScroll` が `false` に設定されている場合でも、そのキーを押している間はビューポートをパンできます。このプロパティを `null` に設定することで、この機能を無効にできます。	`"Space"`
#`disableKeyboardA11y`	`ブール値` このプロパティを使用すると、ノードの選択や矢印キーによる選択ノードの移動など、キーボードアクセシビリティ機能を無効にできます。	`false`

スタイルプロパティ

キャンバス内にレンダリングされた要素に特定のクラスを適用すると、インタラクションの処理方法が変更されます。これらのプロパティを使用すると、必要に応じてクラス名を構成できます。

名前	型	デフォルト値
#`noPanClassName`	`文字列` キャンバス内の要素がマウスイベントの伝播を停止しない場合、その要素をクリックしてドラッグすると、ビューポートがパンされます。"nopan"クラスを追加するとこの動作を防ぎ、このプロパティを使用することでそのクラス名を変更できます。	`"nopan"`
#`noDragClassName`	`文字列` ノードをドラッグ可能にしている場合、そのノードをクリックしてドラッグすると、キャンバス上でノードが移動します。"nodrag"クラスを追加するとこの動作を防ぎ、このプロパティを使用することでそのクラス名を変更できます。	`"nodrag"`
#`noWheelClassName`	`文字列` 通常、マウスがキャンバス上にあるときにマウスホイールをスクロールすると、ビューポートがズームされます。キャンバス内の要素に"nowheel"クラスを追加するとこの動作を防ぎ、このプロパティを使用することでそのクラス名を変更できます。	`"nowheel"`

備考

このコンポーネントのプロパティは、ReactFlowPropsとしてエクスポートされます。

APIリファレンス <ReactFlowProvider />