プラグインコンポーネント

React Flowには、いくつかの追加プラグインコンポーネントが付属しています。このガイドでは、それらの使用方法を説明します。ここでは、前のサンプルコードを使用しています。

ミニマップ

フローが大きくなった場合、すぐに概要を知りたい場合があります。このために、MiniMapコンポーネントを作成しました。子として追加することで、フローに簡単に追加できます

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

読み取り専用

React Flowには、カスタマイズ可能なコントロールバーが付属しており、Controlsコンポーネントをインポートすることで使用できます

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

読み取り専用

パターン背景を表示する場合は、Backgroundコンポーネントを使用できます

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

読み取り専用

React Flowビューポートの上にコンテンツを表示するためのヘルパーコンポーネントです。Panelコンポーネント

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

読み取り専用