69_labeled_handle

Labeled Handle

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

UI Component: labeled-handle

index.tsx

import React, { type ComponentProps } from "react";
import { type HandleProps } from "@xyflow/react";
 
import { cn } from "@/lib/utils";
import { BaseHandle } from "@/registry/components/base-handle";
 
const flexDirections = {
  top: "flex-col",
  right: "flex-row-reverse justify-end",
  bottom: "flex-col-reverse justify-end",
  left: "flex-row",
};
 
export function LabeledHandle({
  className,
  labelClassName,
  handleClassName,
  title,
  position,
  ...props
}: HandleProps &
  ComponentProps<"div"> & {
    title: string;
    handleClassName?: string;
    labelClassName?: string;
  }) {
  const { ref, ...handleProps } = props;
 
  return (
    <div
      title={title}
      className={cn(
        "relative flex items-center",
        flexDirections[position],
        className,
      )}
      ref={ref}
    >
      <BaseHandle
        position={position}
        className={handleClassName}
        {...handleProps}
      />
      <label className={cn("text-foreground px-3", labelClassName)}>
        {title}
      </label>
    </div>
  );
}

component-example.tsx

import React, { memo } from "react";
import { Position } from "@xyflow/react";
 
import { LabeledHandle } from "@/registry/components/labeled-handle";
import { BaseNode } from "@/registry/components/base-node";
 
const LabeledHandleDemo = memo(() => {
  return (
    <BaseNode className="flex px-0 py-5">
      <LabeledHandle
        id="target-1"
        title="Some Input"
        type="target"
        position={Position.Left}
      />
      <LabeledHandle
        id="source-1"
        title="Some Output"
        type="source"
        position={Position.Right}
      />
    </BaseNode>
  );
});
 
LabeledHandleDemo.displayName = "LabeledHandleDemo";
 
export default LabeledHandleDemo;