React FlowでControlsに独自のボタンを追加する方法

React FlowでControlsに独自のボタンを追加する方法

React Flowのデフォルトのコントロールパネルにはzoomin, zoomout, fitview, toggle interactiveの4つのボタンが表示されている。そこに独自のボタンを追加する方法を知ったのでメモ。

React Flowとは

フローチャートや組織図などのチャートを簡単に描くことができるコンポーネント

公式ページより
A customizable React component for building node-based editors and interactive diagrams

実装

ControlButtonを使用するとコントロールパネルにボタンを追加することができる。

titleというpropsを渡すと、ツールチップを表示する。
aのところはsvgなどアイコンにすることも可能。

import {
  ControlButton,
} from '@xyflow/react';

const Component = () => {
  // 省略
  <Controls>
    <ControlButton
      title='Apple'
      >
      a
    </ControlButton>
  </Controls>
  // 省略
}

型定義はこうなっていた

export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>

最後に

間違っていることがあれば、コメントに書いていただけると幸いです。
よろしくお願いいたします。