ComponentsHandlesHandle with Label

Labeled Handle

A handle with a label that can be used to display additional information.

Dependencies:
@xyflow/reactBaseHandle

Installation

Make sure to follow the prerequisites before installing the component.

npx shadcn@latest add https://ui-components-git-tooltip-node-refactor-xyflow.vercel.app/labeled-handle

Usage

1. Copy the component into your app

import React, { memo } from "react";
import { NodeProps, Position } from "@xyflow/react";
 
import { LabeledHandle } from "@/components/labeled-handle";
import { BaseNode } from "@/components/base-node";
 
// You can use Handle components only inside of custom nodes.
const CustomNode = memo(({ selected }: NodeProps) => {
  return (
    <BaseNode className="flex px-0 py-5" selected={selected}>
      <div className="mr-5">
        <LabeledHandle
          id="target-1"
          title="Some Input"
          type="target"
          position={Position.Left}
        />
        <LabeledHandle
          id="target-2"
          title="Another Input"
          type="target"
          position={Position.Left}
        />
        <LabeledHandle
          id="target-3"
          title="And Another Input"
          type="target"
          position={Position.Left}
        />
      </div>
      <div>
        <LabeledHandle
          id="source-1"
          title="Some Output"
          type="source"
          position={Position.Right}
        />
        <LabeledHandle
          id="source-2"
          title="Another Output"
          type="source"
          position={Position.Right}
        />
        <LabeledHandle
          id="source-3"
          title="And Another Output"
          type="source"
          position={Position.Right}
        />
      </div>
    </BaseNode>
  );
});
 
CustomNode.displayName = "LabeledHandleDemo";
 
export default CustomNode;

2. Connect the component with your React Flow application.

"use client";
 
import { Background, ReactFlow } from "@xyflow/react";
import DemoWrapper from "@/components/demo-wrapper";
import Demo from "@/registry/components/labeled-handle/demo";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: {},
    type: "customNode",
  },
];
 
const nodeTypes = {
  customNode: Demo,
};
 
export default function DemoPage() {
  return (
    <DemoWrapper>
      <div className="h-full w-full">
        <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
          <Background />
        </ReactFlow>
      </div>
    </DemoWrapper>
  );
}
Zoom SelectBase Handle