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;


"use client";
import React from "react";
import { cn } from "@/lib/utils";
import { HandleProps } from "@xyflow/react";

import { BaseHandle } from "@/registry/components/base-handle";

function getFlexDirection(position: string) {
  const flexDirection =
    position === "top" || position === "bottom" ? "flex-col" : "flex-row";
  switch (position) {
    case "bottom":
    case "right":
      return flexDirection + "-reverse justify-end";
    default:
      return flexDirection;
  }
}

const LabeledHandle = React.forwardRef<
  HTMLDivElement,
  HandleProps &
    React.HTMLAttributes<HTMLDivElement> & {
      title: string;
      handleClassName?: string;
      labelClassName?: string;
    }
>(({ className, labelClassName, title, position, ...props }, ref) => (
  <div
    ref={ref}
    title={title}
    className={cn(
      "relative flex items-center",
      getFlexDirection(position),
      className,
    )}
  >
    <BaseHandle position={position} {...props} />
    <label className={`px-3 text-foreground ${labelClassName}`}>{title}</label>
  </div>
));

LabeledHandle.displayName = "LabeledHandle";

export { LabeledHandle };


Labeled Handle

Installation