From 940b42de895c80966012a8d8da3ce2cc67bf64e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karlo=20Bistri=C4=8Dki?= <Karlo.Bistricki@infobip.com>
Date: Thu, 31 Jul 2025 16:18:45 +0200
Subject: [PATCH] add DetachedHandle example

---
 examples/react/src/App/routes.ts              |  6 +++
 .../src/examples/DetachedHandle/index.tsx     | 53 +++++++++++++++++++
 .../src/examples/DetachedHandle/style.css     | 10 ++++
 3 files changed, 69 insertions(+)
 create mode 100644 examples/react/src/examples/DetachedHandle/index.tsx
 create mode 100644 examples/react/src/examples/DetachedHandle/style.css

diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts
index 4c003ea5..52f80979 100644
--- a/examples/react/src/App/routes.ts
+++ b/examples/react/src/App/routes.ts
@@ -58,6 +58,7 @@ import AddNodeOnEdgeDrop from '../examples/AddNodeOnEdgeDrop';
 import DevTools from '../examples/DevTools';
 import Redux from '../examples/Redux';
 import MovingHandles from '../examples/MovingHandles';
+import DetachedHandle from '../examples/DetachedHandle';
 
 export interface IRoute {
   name: string;
@@ -146,6 +147,11 @@ const routes: IRoute[] = [
     path: 'default-nodes',
     component: DefaultNodes,
   },
+  {
+    name: 'DetachedHandle',
+    path: 'detached-handle',
+    component: DetachedHandle,
+  },
   {
     name: 'DevTools',
     path: 'devtools',
diff --git a/examples/react/src/examples/DetachedHandle/index.tsx b/examples/react/src/examples/DetachedHandle/index.tsx
new file mode 100644
index 00000000..9ca20ddc
--- /dev/null
+++ b/examples/react/src/examples/DetachedHandle/index.tsx
@@ -0,0 +1,53 @@
+import { ReactFlow, Node, ReactFlowProvider, Background, BackgroundVariant, NodeProps, Handle, Position } from '@xyflow/react';
+
+import './style.css';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 50, y: 100 },
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 450, y: 100 },
+  },
+];
+
+const CustomNode = (_: NodeProps) => {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} />
+      <div>Custom node</div>
+      <Handle type="source" position={Position.Right}>
+        <button className="detached-handle">➡️</button>
+      </Handle>
+    </>
+  );
+};
+
+const nodeTypes = {
+  default: CustomNode,
+};
+
+const DetachedHandle = () => {
+  return (
+    <ReactFlow defaultNodes={initialNodes} nodeTypes={nodeTypes} fitView>
+      <Background variant={BackgroundVariant.Lines} />
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <DetachedHandle />
+    </ReactFlowProvider>
+  );
+}
diff --git a/examples/react/src/examples/DetachedHandle/style.css b/examples/react/src/examples/DetachedHandle/style.css
new file mode 100644
index 00000000..941c9807
--- /dev/null
+++ b/examples/react/src/examples/DetachedHandle/style.css
@@ -0,0 +1,10 @@
+.detached-handle {
+    position: absolute;
+    top: 50%;
+    left: 1rem;
+    transform: translateY(-50%);
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    border-radius: 50%;
+}
\ No newline at end of file