97___edgetext___

<EdgeText />

Source on GitHub

You can use the <EdgeText /> component as a helper component to display text within your custom edges.

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}
    />
  );
}

Props

For TypeScript users, the props type for the <EdgeText /> component is exported as EdgeTextProps.

• x: number The x position where the label should be rendered.
• y: number The y position where the label should be rendered.
• label?: ReactNode The label or custom element to render along the edge. This is commonly a text label or some custom controls.
• labelStyle?: CSSProperties Custom styles to apply to the label.
• labelShowBg?: boolean
• labelBgStyle?: CSSProperties
• labelBgPadding?: [number, number]
• labelBgBorderRadius?: number
• ...props: Omit<SVGAttributes<SVGElement>, "x" | "y">

Additionally, you may also pass any standard React HTML attributes such as onClick, className and so on.