feat(react): add internal node helper

packages/react/src/hooks/useReactFlow.ts

@@ -3,7 +3,7 @@ import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from './useStore';
-import type { ReactFlowInstance, Instance, Node, Edge } from '../types';
+import type { ReactFlowInstance, Instance, Node, Edge, InternalNode } from '../types';
 import { getElementsDiffChanges, isNode } from '../utils';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
@@ -20,13 +20,20 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
   const viewportHelper = useViewportHelper();
   const store = useStoreApi();
 
-  const getNodes = useCallback<Instance.GetNodes<NodeType>>(() => {
+  const getNodes = useCallback<Instance.GetNodes<NodeType>>(
-    return store.getState().nodes.map((n) => ({ ...n })) as NodeType[];
+    () => store.getState().nodes.map((n) => ({ ...n })) as NodeType[],
-  }, []);
+    []
+  );
 
-  const getNode = useCallback<Instance.GetNode<NodeType>>((id) => {
+  const getInternalNode = useCallback<Instance.GetInternalNode<NodeType>>(
-    return store.getState().nodeLookup.get(id)?.internals.userNode as NodeType;
+    (id) => store.getState().nodeLookup.get(id) as InternalNode<NodeType>,
-  }, []);
+    []
+  );
+
+  const getNode = useCallback<Instance.GetNode<NodeType>>(
+    (id) => getInternalNode(id)?.internals.userNode as NodeType,
+    [getInternalNode]
+  );
 
   const getEdges = useCallback<Instance.GetEdges<EdgeType>>(() => {
     const { edges = [] } = store.getState();
@@ -299,6 +306,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
       ...viewportHelper,
       getNodes,
       getNode,
+      getInternalNode,
       getEdges,
       getEdge,
       setNodes,
@@ -316,6 +324,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
     viewportHelper,
     getNodes,
     getNode,
+    getInternalNode,
     getEdges,
     getEdge,
     setNodes,

packages/react/src/types/instance.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 import type { Rect, Viewport } from '@xyflow/system';
-import type { Node, Edge, ViewportHelperFunctions } from '.';
+import type { Node, Edge, ViewportHelperFunctions, InternalNode } from '.';
 
 export type ReactFlowJsonObject<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
   nodes: NodeType[];
@@ -20,6 +20,7 @@ export namespace Instance {
   ) => void;
   export type AddNodes<NodeType extends Node = Node> = (payload: NodeType[] | NodeType) => void;
   export type GetNode<NodeType extends Node = Node> = (id: string) => NodeType | undefined;
+  export type GetInternalNode<NodeType extends Node = Node> = (id: string) => InternalNode<NodeType> | undefined;
   export type GetEdges<EdgeType extends Edge = Edge> = () => EdgeType[];
   export type SetEdges<EdgeType extends Edge = Edge> = (
     payload: EdgeType[] | ((edges: EdgeType[]) => EdgeType[])
@@ -83,6 +84,13 @@ export type ReactFlowInstance<NodeType extends Node = Node, EdgeType extends Edg
    * @returns the node or undefined if no node was found
    */
   getNode: Instance.GetNode<NodeType>;
+  /**
+   * Returns an internal node by id.
+   *
+   * @param id - the node id
+   * @returns the internal node or undefined if no node was found
+   */
+  getInternalNode: Instance.GetInternalNode<NodeType>;
   /**
    * Returns edges.
    *