fix(edges): add suport for className in baseEdge and remove unecessary render

packages/react/src/components/Edges/BaseEdge.tsx

@@ -2,6 +2,7 @@ import { isNumeric } from '@xyflow/system';
 
 import type { BaseEdgeProps } from '../../types';
 import EdgeText from './EdgeText';
+import classcat from 'classcat';
 
 const BaseEdge = ({
   id,
@@ -17,6 +18,7 @@ const BaseEdge = ({
   style,
   markerEnd,
   markerStart,
+  className,
   interactionWidth = 20,
 }: BaseEdgeProps) => {
   return (
@@ -26,7 +28,7 @@ const BaseEdge = ({
         style={style}
         d={path}
         fill="none"
-        className="react-flow__edge-path"
+        className={classcat(['react-flow__edge-path', className])}
         markerEnd={markerEnd}
         markerStart={markerStart}
       />

packages/react/src/components/Edges/EdgeText.tsx

@@ -1,4 +1,4 @@
-import { memo, useRef, useState, useEffect, type FC, type PropsWithChildren } from 'react';
+import { memo, useState, type FC, type PropsWithChildren, useCallback } from 'react';
 import cc from 'classcat';
 import type { Rect } from '@xyflow/system';
 
@@ -17,22 +17,21 @@ const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
   className,
   ...rest
 }) => {
-  const edgeRef = useRef<SVGTextElement>(null);
-  const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
+  const [edgeTextBbox, setEdgeTextBbox] = useState<Rect>({ x: 1, y: 0, width: 0, height: 0 });
   const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
 
-  useEffect(() => {
-    if (edgeRef.current) {
-      const textBbox = edgeRef.current.getBBox();
+  const onEdgeTextRefChange = useCallback((edgeRef: SVGTextElement) => {
+    if (edgeRef === null) return;
 
-      setEdgeTextBbox({
-        x: textBbox.x,
-        y: textBbox.y,
-        width: textBbox.width,
-        height: textBbox.height,
-      });
-    }
-  }, [label]);
+    const textBbox = edgeRef.getBBox();
+
+    setEdgeTextBbox({
+      x: textBbox.x,
+      y: textBbox.y,
+      width: textBbox.width,
+      height: textBbox.height,
+    });
+  }, []);
 
   if (typeof label === 'undefined' || !label) {
     return null;
@@ -57,7 +56,13 @@ const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
           ry={labelBgBorderRadius}
         />
       )}
-      <text className="react-flow__edge-text" y={edgeTextBbox.height / 2} dy="0.3em" ref={edgeRef} style={labelStyle}>
+      <text
+        className="react-flow__edge-text"
+        y={edgeTextBbox.height / 2}
+        dy="0.3em"
+        ref={onEdgeTextRefChange}
+        style={labelStyle}
+      >
         {label}
       </text>
       {children}

packages/react/src/types/edges.ts

@@ -99,8 +99,9 @@ export type EdgeProps<T = any> = Pick<
     pathOptions?: any;
   };
 
-export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd' | 'interactionWidth'> &
-  EdgeLabelOptions & {
+export type BaseEdgeProps = Pick<EdgeProps, 'style' | 'markerStart' | 'markerEnd' | 'interactionWidth'> & {
+  className?: CSSProperties;
+} & EdgeLabelOptions & {
     id?: string;
     labelX?: number;
     labelY?: number;