From 2a673370ad1fc7d380279a5ad6f49b43c84a2b54 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 15 Aug 2024 12:04:14 +0200
Subject: [PATCH 1/2] added possibility to use selector with useConnection hook

---
 packages/react/src/hooks/useConnection.ts | 25 +++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/hooks/useConnection.ts b/packages/react/src/hooks/useConnection.ts
index 46784c4f..94db5140 100644
--- a/packages/react/src/hooks/useConnection.ts
+++ b/packages/react/src/hooks/useConnection.ts
@@ -4,17 +4,34 @@ import { ConnectionState, pointToRendererPoint } from '@xyflow/system';
 import { useStore } from './useStore';
 import type { InternalNode, Node, ReactFlowStore } from '../types';
 
-const selector = (s: ReactFlowStore) => {
+function storeSelector(s: ReactFlowStore) {
   return s.connection.inProgress
     ? { ...s.connection, to: pointToRendererPoint(s.connection.to, s.transform) }
     : { ...s.connection };
-};
+}
+
+function getSelector<NodeType extends Node = Node, SelectorReturn = ConnectionState<InternalNode<NodeType>>>(
+  connectionSelector?: (connection: ConnectionState<InternalNode<NodeType>>) => SelectorReturn
+): (s: ReactFlowStore) => SelectorReturn | ConnectionState<InternalNode> {
+  if (connectionSelector) {
+    const combinedSelector = (s: ReactFlowStore) => {
+      const connection = storeSelector(s) as ConnectionState<InternalNode<NodeType>>;
+      return connectionSelector(connection);
+    };
+    return combinedSelector;
+  }
+
+  return storeSelector;
+}
 /**
  * Hook for accessing the connection state.
  *
  * @public
  * @returns ConnectionState
  */
-export function useConnection<NodeType extends Node = Node>(): ConnectionState<InternalNode<NodeType>> {
-  return useStore(selector, shallow) as ConnectionState<InternalNode<NodeType>>;
+export function useConnection<NodeType extends Node = Node, SelectorReturn = ConnectionState<InternalNode<NodeType>>>(
+  connectionSelector?: (connection: ConnectionState<InternalNode<NodeType>>) => SelectorReturn
+): SelectorReturn {
+  const combinedSelector = getSelector<NodeType, SelectorReturn>(connectionSelector);
+  return useStore(combinedSelector, shallow) as SelectorReturn;
 }

From cca11ea1c549f3fae1e52f5c121f607ded9764f3 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 15 Aug 2024 12:22:50 +0200
Subject: [PATCH 2/2] added changeset

---
 .changeset/tender-jobs-kneel.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tender-jobs-kneel.md

diff --git a/.changeset/tender-jobs-kneel.md b/.changeset/tender-jobs-kneel.md
new file mode 100644
index 00000000..8fb3b0f2
--- /dev/null
+++ b/.changeset/tender-jobs-kneel.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': minor
+---
+
+Added optional selector for useConnection hook