Merge pull request #5114 from dimaMachina/tsdoc-edgelabelrendererprops

.changeset/large-suns-notice.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+feat: export `EdgeLabelRendererProps`

packages/react/src/components/EdgeLabelRenderer/index.tsx

@@ -6,6 +6,10 @@ import type { ReactFlowState } from '../../types';
 
 const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer');
 
+export type EdgeLabelRendererProps = {
+  children: ReactNode
+}
+
 /**
  * Edges are SVG-based. If you want to render more complex labels you can use the
  * `<EdgeLabelRenderer />` component to access a div based renderer. This component
@@ -47,7 +51,7 @@ const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__e
  * add mouse interactions you need to set the style `pointerEvents: all` and add
  * the `nopan` class on the label or the element you want to interact with.
  */
-export function EdgeLabelRenderer({ children }: { children: ReactNode }) {
+export function EdgeLabelRenderer({ children }: EdgeLabelRendererProps) {
   const edgeLabelRenderer = useStore(selector);
 
   if (!edgeLabelRenderer) {

packages/react/src/index.ts

@@ -9,7 +9,7 @@ export { SmoothStepEdge } from './components/Edges/SmoothStepEdge';
 export { BaseEdge } from './components/Edges/BaseEdge';
 export { ReactFlowProvider } from './components/ReactFlowProvider';
 export { Panel, type PanelProps } from './components/Panel';
-export { EdgeLabelRenderer } from './components/EdgeLabelRenderer';
+export { EdgeLabelRenderer, type EdgeLabelRendererProps } from './components/EdgeLabelRenderer';
 export { ViewportPortal } from './components/ViewportPortal';
 
 export { useReactFlow } from './hooks/useReactFlow';