<EdgeText />

<EdgeText /> コンポーネントは、カスタムエッジ内にテキストを表示するためのヘルパーコンポーネントとして使用できます。

import { EdgeText } from '@xyflow/react';
 
export function CustomEdgeLabel({ label }) {
  return (
    <EdgeText
      x={100}
      y={100}
      label={label}
      labelStyle={{ fill: 'white' }}
      labelShowBg
      labelBgStyle={{ fill: 'red' }}
      labelBgPadding={[2, 4]}
      labelBgBorderRadius={2}
    />
  );
}

プロパティ

TypeScriptユーザーの場合、<EdgeText />コンポーネントのプロパティ型はEdgeTextPropsとしてエクスポートされます。

名前	型	デフォルト
#`x`	`number` ラベルを表示する x 位置。
#`y`	`number` ラベルを表示する y 位置。
#`label`	`string \| React.ReactNode` エッジに沿ってレンダリングするテキストまたはラベル。
#`labelStyle`	`React.CSSProperties` ラベルに適用するカスタムスタイル。	`{}`
#`labelShowBg`	`boolean`
#`labelBgStyle`	`React.CSSProperties`
#`labelBgPadding`	`[number, number]`
#`labelBgBorderRadius`	`number`

さらに、onClick、classNameなどの標準的なReact HTML属性も渡すことができます。

コンポーネント型