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";

const flexDirections = {
  top: "flex-col",
  right: "flex-row-reverse justify-end",
  bottom: "flex-col-reverse justify-end",
  left: "flex-row",
};

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

LabeledHandle.displayName = "LabeledHandle";

export { LabeledHandle };


Labeled Handle

Installation