From 5039ccc1e60496df436e67081560023ea2535667 Mon Sep 17 00:00:00 2001
From: Jake Saunders <jakelsaunders94@gmail.com>
Date: Sat, 14 Sep 2024 11:38:08 +0100
Subject: [PATCH] fix(custom-handle-example): update the custom handle example
 to svelte syntax

---
 .../pages/api-reference/components/handle.mdx | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/sites/svelteflow.dev/src/pages/api-reference/components/handle.mdx b/sites/svelteflow.dev/src/pages/api-reference/components/handle.mdx
index de21e8089..6a17a0d53 100644
--- a/sites/svelteflow.dev/src/pages/api-reference/components/handle.mdx
+++ b/sites/svelteflow.dev/src/pages/api-reference/components/handle.mdx
@@ -44,17 +44,26 @@ connection source matches a given id.
 
 ```svelte
 <script>
-import { Handle, Position } from '@xyflow/svelte';
+	import { Handle, Position } from '@xyflow/svelte';
+
+	export let position;
+	export let source;
+
+	function isValidConnection(connection) {
+		if (connection.source === source) {
+			return true;
+		}
+		return false;
+	}
+
 </script>
 
-export const TargetHandleWithValidation = ({ position, source }) => (
-  <Handle
-    type="target"
-    position={position}
-    isValidConnection={(connection) => connection.source === source}
-    style={{ background: '#fff' }}
-  />
-);
+<Handle
+	type="target"
+	position={position}
+	{isValidConnection}
+	style="background: #fff"
+/>
 ```
 
 ### Style handles when connecting