feat(react): add useConnection

packages/react/src/hooks/useConnection.ts

@@ -0,0 +1,27 @@
+import { shallow } from 'zustand/shallow';
+
+import { useStore } from './useStore';
+import type { ReactFlowStore } from '../types/store';
+
+const selector = (s: ReactFlowStore) => ({
+  startHandle: s.connectionStartHandle,
+  endHandle: s.connectionEndHandle,
+  status: s.connectionStatus,
+  position: s.connectionStartHandle ? s.connectionPosition : null,
+});
+
+/**
+ * Hook for accessing the ongoing connection.
+ *
+ * @returns ongoing connection: startHandle, endHandle, status, position
+ */
+export function useConnection(): {
+  startHandle: ReactFlowStore['connectionStartHandle'];
+  endHandle: ReactFlowStore['connectionEndHandle'];
+  status: ReactFlowStore['connectionStatus'];
+  position: ReactFlowStore['connectionPosition'] | null;
+} {
+  const ongoingConnection = useStore(selector, shallow);
+
+  return ongoingConnection;
+}

packages/react/src/index.ts

@@ -25,6 +25,7 @@ export { default as useOnSelectionChange, type UseOnSelectionChangeOptions } fro
 export { default as useNodesInitialized, type UseNodesInitializedOptions } from './hooks/useNodesInitialized';
 export { useHandleConnections } from './hooks/useHandleConnections';
 export { useNodesData } from './hooks/useNodesData';
+export { useConnection } from './hooks/useConnection';
 export { useNodeId } from './contexts/NodeIdContext';
 
 export { applyNodeChanges, applyEdgeChanges, handleParentExpand } from './utils/changes';