From ea59a7176ecbe276a8209465b7fc7cfb60cf342d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 20 Jun 2024 10:16:51 +0200
Subject: [PATCH] docs: add info on handle limit

---
 docs/src/guide/handle.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/src/guide/handle.md b/docs/src/guide/handle.md
index 9e2561ba..6ebc13fa 100644
--- a/docs/src/guide/handle.md
+++ b/docs/src/guide/handle.md
@@ -125,6 +125,30 @@ You cannot hide a handle by removing it from the DOM (for example using `v-if` o
 <Handle type="source" :position="Position.Right" style="opacity: 0" />
 ```
 
+## Limiting Connections
+
+You can limit the number of connections a handle can have by setting the `connectable` prop on the `<Handle>` component.
+
+This prop accepts a boolean value (defaults to `true`), a number (the maximum number of connections), or a function that returns a boolean.
+
+Using a function allows you to implement custom logic to determine if a handle can be connected to or not.
+```vue
+<script lang="ts" setup>
+import { Position, Handle, type HandleConnectableFunc } from '@vue-flow/core'  
+  
+const handleConnectable: HandleConnectableFunc = (node, connectedEdges) => {
+  // only allow connections if the node has less than 3 connections
+  return connectedEdges.length < 3
+}
+</script>
+
+<template>
+  <Handle type="source" :position="Position.Right" :connectable="handleConnectable" />
+</template>
+```
+
+
+
 ## Dynamic Handle Positions & Adding/Removing Handles Dynamically
 
 ::: tip