Zenn
Open12

React Flowの公式ドキュメントを読む

React
#
reactflow
nakaakistnakaakist

Getting Started

https://reactflow.dev/docs/getting-started/building-a-flow/

下記みたいな感じでフローを作れる。nodeの形式は、{ id: '1', position: { x: 0, y: 0 }, data: { label: 'World' }}みたいな感じ。edgeは{ id: '1-2', source: '1', target: '2' }みたいな感じ。

<ReactFlow nodes={nodes} edges={edges}>
  <Background />
  <Controls />
</ReactFlow>

また、ReactFlowコンポーネントにonNodesChange、onEdgesChange、onConnectといったコールバックを渡すことにより、flowをインタラクティブにできる

nakaakistnakaakist

Custom Nodes

https://reactflow.dev/docs/guides/custom-nodes/

任意のものをレンダリングできるカスタムノードを作れる。
下記のように、data propsを受け取るコンポーネントを作る。dataには、positionなどの各種データが入っている。 ReactFlowのHandleコンポーネントを入れることにより、他のnodeとのconnectionができるようになる。

function TextUpdaterNode({ data }) {
  return (
    <>
      <Handle type="target" position={Position.Top} />
      <div>
        <label htmlFor="text">Text:</label>
        <input id="text" name="text" onChange={onChange} className="nodrag" />
      </div>
      <Handle type="source" position={Position.Bottom} id="a" />
      <Handle type="source" position={Position.Bottom} id="b" style={handleStyle} />
    </>
  );
}

Flow本体側では、下記のようにnodeTypesをReactFlowにわたし、かつnodesのtypeにそのtypeを指定すれば、カスタムノードがレンダリングされる

const nodeTypes = useMemo(() => ({ textUpdater: TextUpdaterNode }), []);
const nodes = [
  { id: 'node-1', type: 'textUpdater', position: { x: 0, y: 0 }, data: { value: 123 } },
];

return <ReactFlow nodeTypes={nodeTypes} nodes={nodes} />;
nakaakistnakaakist

Sub Flows

https://reactflow.dev/docs/guides/sub-flows/

ノードの中にサブフローを作れる。
nodeのプロパティとしてparentNodeを指定するとノードの親子関係を作れる。
子のpositionは、親に対する相対位置となるが、論理的に親子関係になっているわけでは必ずしもない。
例えば、子ノードから、親の外のノードへのconnectionは普通に作れる。

nakaakistnakaakist

Uncontrolled Flow

https://reactflow.dev/docs/guides/uncontrolled-flow/

controlledなflowでは、コードを書く人が明示的にnode, edgeの状態を指定するが、uncontrolledの場合はreact flowがそこを担う。
uncontrolledな場合は、onConnectなどのイベントハンドラをReactFlowコンポーネントに渡す必要がなくなる。

ただし、こうすると、nodeやedgeを直接プログラム的に作成・更新したい場合のやり方が少し変わる。下記のように、useReactFlowというhookから得られるinstanceのメソッドを呼ぶことになる。

const reactFlowInstance = useReactFlow();
const onClick = () => {
  const newNode = { ... };
  reactFlowInstance.addNodes(newNode);
};
nakaakistnakaakist

Layouting

https://reactflow.dev/docs/guides/layouting/

ReactFlowは、基本的なレイアウト機能はあるが、色々カスタマイズもできる。
サードパーティのライブラリとして下記が使える。(上がシンプル、下に行くほど複雑)

  • Dagre
    • 最小のconfigで、パフォーマンス重視。treeを描画するならまずこれを検討
  • D3-Hierarchy
    • 単一rootのtreeの描画に適す。単純なtreeの他に、tree map、partition layout、enclosure diagramといったオプションがある
  • D3-Force
    • 物理的な力をシミュレーションすることによってレイアウトを決める。やや複雑なレイアウトになる
  • ELK
    • 最もオプションが豊富で色々なことができる

また、edge routingの要件がある場合は、react-flow-smart-edgeなどのライブラリを使う必要がある。

nakaakistnakaakist

Remove Attribution

https://reactflow.dev/docs/guides/remove-attribution/

デフォルトでは、ReactFlowで作られたUIには「React Flow」という文字が右下に表示されるが、これをoffにできる。(ただし、商用利用の場合は有料プラン前提でoffにすることが望ましい)
やり方は、ReactFlowコンポーネントのpropsに、proOptions={{ hideAttribution: true }}を渡すだけ

nakaakistnakaakist

Theming

https://reactflow.dev/docs/guides/theming/

デフォルトスタイルは、import 'reactflow/dist/style.css';とするとロードされるミニマムなもの。
style.cssをbase.cssにすると、ほぼスタイルがあたっていないものになる。

ReactFlowコンポーネントのstyleというpropに直接スタイルを入れると、ラッパーの。スタイルを変えられる。tailwindとかもつかえる。

また、各コンポーネントには特定のクラス名がついているので、そこにカスタムCSSを当てていくこともできる。クラス名の一覧はここにある。

nakaakistnakaakist

プライシング

https://pro.reactflow.dev/pricing

年払い、1月あたりの価格。ユーザー単位で価格が変わることはなく、組織で1つのsubscriptionで良い。とても良心的。

  • Starter
    • $129
    • pro exampleが閲覧できる
    • github issueを優先的にみてもらえる
  • Pro
    • $249
    • １ヶ月に1時間まで、個別のメールサポートあり
    • 導入時に電話で説明受けられる
  • Enterprise
    • 個別見積もり
    • １ヶ月に１時間、個別のビデオ、電話、メールサポートあり