はじめに

React Flowは、ノードベースのアプリケーションを構築するためのライブラリです。シンプルな静的図からデータの可視化、複雑なビジュアルエディターまで、あらゆるものを構築できます。カスタムノードタイプとエッジを実装でき、ミニマップやビューポートコントロールなどのコンポーネントがすぐに利用できます。

すぐに使い始めるには、クイックスタートガイドをご覧ください。そうでない場合は、React Flowの主な機能を見てみましょう。

主な機能

👌 使いやすい：React Flowには、すぐに使える多くの機能が備わっています。ノードのドラッグ、ズームとパン、複数のノードとエッジの選択、エッジの追加/削除はすべて組み込みです。

🎨 カスタマイズ可能: React Flowはカスタムノードタイプとエッジタイプをサポートしています。カスタムノードはReactコンポーネントなので、必要なものは何でも実装できます。組み込みのノードタイプに縛られることはありません。カスタムエッジを使用すると、ラベル、コントロール、およびカスタムロジックをノードエッジに追加できます。

⚡️ 高速レンダリング: React Flowは変更されたノードのみをレンダリングし、ビューポート内にあるノードのみが表示されるようにします。

🧩 組み込みプラグイン: React Flowには、すぐに使えるプラグインがいくつか付属しています

• <Background />プラグインは、いくつかの基本的なカスタマイズ可能な背景パターンを実装します。
• <MiniMap />プラグインは、画面の隅にグラフの小さなバージョンを表示します。
• <Controls />プラグインは、ビューポートをズーム、センタリング、およびロックするためのコントロールを追加します。
• <Panel /> プラグインを使用すると、ビューポートの上にコンテンツを簡単に配置できます。
• <NodeToolbar /> プラグインを使用すると、ノードにアタッチされたツールバーをレンダリングできます。
• <NodeResizer /> プラグインを使用すると、ノードにサイズ変更機能を簡単に追加できます。

💪 信頼性: React FlowはTypeScriptで記述されているため、バグを早期に発見し、修正を容易にします。 その他すべてのために、堅牢なcypressテストスイートを用意しているため、React Flowを安心して使用できます。

次へ

React Flowの概要がわかったので、次のページでは、ドキュメント全体で繰り返し使用される一般的な用語であるノード、エッジ、およびハンドルについて説明します。