fix(react): ReactFlow comp ref type

examples/react/src/examples/CustomNode/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react';
+import { useState, useEffect, MouseEvent, ChangeEvent, useCallback, useRef } from 'react';
 import {
   ReactFlow,
   MiniMap,
@@ -45,6 +45,7 @@ const nodeTypes = {
 };
 
 const CustomNodeFlow = () => {
+  const ref = useRef(null);
   const [nodes, setNodes] = useState<MyNode[]>([]);
   const onNodesChange: OnNodesChange<MyNode> = useCallback(
     (changes) =>
@@ -165,6 +166,7 @@ const CustomNodeFlow = () => {
       minZoom={0.3}
       maxZoom={2}
       onBeforeDelete={onBeforeDelete}
+      ref={ref}
     >
       <MiniMap<MyNode>
         nodeStrokeColor={(n: MyNode): string => {

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

@@ -3,7 +3,14 @@
  * The user can then drag the connection to another handle or node. When the user releases the mouse, we check if the
  * connection is valid and if so, we call the onConnect callback.
  */
-import { memo, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
+import {
+  memo,
+  HTMLAttributes,
+  forwardRef,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+  ForwardedRef,
+} from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import {
@@ -58,8 +65,7 @@ const connectingSelector =
     };
   };
 
-const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
-  (
+function HandleComponent(
   {
     type = 'source',
     position = Position.Top,
@@ -74,9 +80,9 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
     onMouseDown,
     onTouchStart,
     ...rest
-    },
-    ref
-  ) => {
+  }: HandleComponentProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
   const handleId = id || null;
   const isTarget = type === 'target';
   const store = useStoreApi();
@@ -237,11 +243,8 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
     </div>
   );
 }
-);
-
-HandleComponent.displayName = 'Handle';
 
 /**
  * The Handle component is the part of a node that can be used to connect nodes.
  */
-export const Handle = memo(HandleComponent);
+export const Handle = memo(forwardRef(HandleComponent));

packages/react/src/container/ReactFlow/index.tsx

@@ -9,7 +9,7 @@ import { StoreUpdater } from '../../components/StoreUpdater';
 import { useColorModeClass } from '../../hooks/useColorModeClass';
 import { GraphView } from '../GraphView';
 import { Wrapper } from './Wrapper';
-import type { Edge, Node, ReactFlowProps, ReactFlowRefType } from '../../types';
+import type { Edge, Node, ReactFlowProps } from '../../types';
 import { defaultViewport as initViewport, defaultNodeOrigin } from './init-values';
 
 const wrapperStyle: CSSProperties = {
@@ -142,7 +142,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     debug,
     ...rest
   }: ReactFlowProps<NodeType, EdgeType>,
-  ref: ForwardedRef<ReactFlowRefType>
+  ref: ForwardedRef<HTMLDivElement>
 ) {
   const rfId = id || '1';
   const colorModeClassName = useColorModeClass(colorMode);
@@ -286,4 +286,4 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
   );
 }
 
-export default forwardRef(ReactFlow) as typeof ReactFlow;
+export default forwardRef(ReactFlow);

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

@@ -509,5 +509,3 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    */
   debug?: boolean;
 }
-
-export type ReactFlowRefType = HTMLDivElement;

packages/react/src/types/general.ts

@@ -1,3 +1,4 @@
+import { ComponentType } from 'react';
 import {
   FitViewParamsBase,
   FitViewOptionsBase,
@@ -15,7 +16,13 @@ import {
 } from '@xyflow/system';
 
 import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps } from '.';
-import { ComponentType } from 'react';
+
+// this is needed, to use generics + forwardRef
+declare module 'react' {
+  function forwardRef<T, P>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+}
 
 export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
 export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;