<EdgeLabelRenderer />

GitHub でソースを見る

エッジは SVG ベースです。より複雑なラベルをレンダリングしたい場合は、<EdgeLabelRenderer /> コンポーネントを使用して、div ベースのレンダラーにアクセスできます。このコンポーネントは、エッジの上に配置された<div />にラベルをレンダリングするポータルです。このコンポーネントの使い方の例は、エッジラベルレンダラーの例で見ることができます。

import React from 'react';
import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
 
const CustomEdge = ({ id, data, ...props }) => {
  const [edgePath, labelX, labelY] = getBezierPath(props);
 
  return (
    <>
      <BaseEdge id={id} path={edgePath} />
      <EdgeLabelRenderer>
        <div
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
            background: '#ffcc00',
            padding: 10,
            borderRadius: 5,
            fontSize: 12,
            fontWeight: 700,
          }}
          className="nodrag nopan"
        >
          {data.label}
        </div>
      </EdgeLabelRenderer>
    </>
  );
};
 
export default CustomEdge;

プロパティ

名前	型
#`children`	`React.ReactNode`

注意

<EdgeLabelRenderer />は、デフォルトではポインタイベントを持ちません。マウスインタラクションを追加したい場合は、スタイルpointerEvents: allを設定し、インタラクションしたいラベルまたは要素にnopanクラスを追加する必要があります。

コンポーネント型