diff --git a/docs/src/guide/composables.md b/docs/src/guide/composables.md
index d5cd44d0..63d02df2 100644
--- a/docs/src/guide/composables.md
+++ b/docs/src/guide/composables.md
@@ -149,8 +149,10 @@ console.log(nodeId.value) // '1'
 
 ## [useHandle](/typedocs/functions/useHandle)
 
-Instead of using the Handle component you can use the useHandle composable to create your own custom nodes. `useHandle`
-provides you with a mouseDown- and click-handler functions that you can apply to the element you want to use as a
+Instead of using the Handle component you can use the useHandle composable to create your own custom nodes. 
+
+`useHandle`
+provides you with a pointerDown- and click-handler functions that you can apply to the element you want to use as a
 node-handle.
 
 This is how the default handle component is built:
@@ -167,40 +169,45 @@ const props = withDefaults(defineProps<HandleProps>(), {
   connectable: true,
 })
 
-const { id, hooks, connectionStartHandle } = useVueFlow()
 const nodeId = inject(NodeId, '')
 
-const { onMouseDown, onClick } = useHandle()
-const onMouseDownHandler = (event: MouseEvent) =>
-  onMouseDown(event, props.id ?? null, nodeId, props.type === 'target', props.isValidConnection, undefined, (connection) =>
-    hooks.value.connect.trigger(connection),
-  )
-const onClickHandler = (event: MouseEvent) => onClick(event, props.id ?? null, nodeId, props.type, props.isValidConnection)
+const { id, hooks, connectionStartHandle } = useVueFlow()
+
+const { handlePointerDown, handleClick } = useHandle({
+  nodeId,
+  handleId: props.id,
+  isValidConnection: props.isValidConnection,
+  type: props.type,
+})
+
+const onMouseDownHandler = (event: MouseEvent) => handlePointerDown(event)
+
+const onClickHandler = (event: MouseEvent) => handleClick(event)
 </script>
 
 <script lang="ts">
 export default {
-  name: 'Handle',
+  name: 'CustomHandle',
 }
 </script>
 
 <template>
   <div
-    :data-handleid="props.id"
+    :data-handleid="id"
     :data-nodeid="nodeId"
-    :data-handlepos="props.position"
+    :data-handlepos="position"
     class="vue-flow__handle nodrag"
     :class="[
-      `vue-flow__handle-${props.position}`,
+      `vue-flow__handle-${position}`,
       `vue-flow__handle-${id}`,
       {
-        source: props.type !== 'target',
-        target: props.type === 'target',
-        connectable: props.connectable,
+        source: type !== 'target',
+        target: type === 'target',
+        connectable: connectable,
         connecting:
           connectionStartHandle?.nodeId === nodeId &&
-          connectionStartHandle?.handleId === props.id &&
-          connectionStartHandle?.type === props.type,
+          connectionStartHandle?.handleId === id &&
+          connectionStartHandle?.type === type,
       },
     ]"
     @mousedown="onMouseDownHandler"