pass through NodeType to connectionLineComponent ReactFlow prop

.changeset/happy-hats-lay.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': minor
+---
+
+Pass `NodeType` type argument from `ReactFlowProps` to `connectionLineComponent` property.

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

@@ -11,12 +11,12 @@ import {
 
 import { useStore } from '../../hooks/useStore';
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge';
-import type { ConnectionLineComponent, ReactFlowState } from '../../types';
+import type { ConnectionLineComponent, Node, ReactFlowState } from '../../types';
 import { useConnection } from '../../hooks/useConnection';
 
-type ConnectionLineWrapperProps = {
+type ConnectionLineWrapperProps<NodeType extends Node = Node> = {
   type: ConnectionLineType;
-  component?: ConnectionLineComponent;
+  component?: ConnectionLineComponent<NodeType>;
   containerStyle?: CSSProperties;
   style?: CSSProperties;
 };
@@ -29,7 +29,7 @@ const selector = (s: ReactFlowState) => ({
   height: s.height,
 });
 
-export function ConnectionLineWrapper({ containerStyle, style, type, component }: ConnectionLineWrapperProps) {
+export function ConnectionLineWrapper<NodeType extends Node = Node>({ containerStyle, style, type, component }: ConnectionLineWrapperProps<NodeType>) {
   const { nodesConnectable, width, height, isValid, inProgress } = useStore(selector, shallow);
   const renderConnection = !!(width && nodesConnectable && inProgress);
 
@@ -51,15 +51,15 @@ export function ConnectionLineWrapper({ containerStyle, style, type, component }
   );
 }
 
-type ConnectionLineProps = {
+type ConnectionLineProps<NodeType extends Node = Node> = {
   type: ConnectionLineType;
   style?: CSSProperties;
-  CustomComponent?: ConnectionLineComponent;
+  CustomComponent?: ConnectionLineComponent<NodeType>;
   isValid: boolean | null;
 };
 
-const ConnectionLine = ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps) => {
+const ConnectionLine = <NodeType extends Node = Node> ({ style, type = ConnectionLineType.Bezier, CustomComponent, isValid }: ConnectionLineProps<NodeType>) => {
-  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection();
+  const { inProgress, from, fromNode, fromHandle, fromPosition, to, toNode, toHandle, toPosition } = useConnection<NodeType>();
 
   if (!inProgress) {
     return;

packages/react/src/types/component-props.ts

@@ -259,7 +259,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   /** Styles to be applied to the connection line */
   connectionLineStyle?: CSSProperties;
   /** React Component to be used as a connection line */
-  connectionLineComponent?: ConnectionLineComponent;
+  connectionLineComponent?: ConnectionLineComponent<NodeType>;
   /** Styles to be applied to the container of the connection line */
   connectionLineContainerStyle?: CSSProperties;
   /** 'strict' connection mode will only allow you to connect source handles to target handles.