60_base_handle

Base Handle

A handle with some basic styling used for creating a shared design among all handles in your application.

UI Component: base-handle

index.tsx

import type { ComponentProps } from "react";
import { Handle, type HandleProps } from "@xyflow/react";
 
import { cn } from "@/lib/utils";
 
export type BaseHandleProps = HandleProps;
 
export function BaseHandle({
  className,
  children,
  ...props
}: ComponentProps<typeof Handle>) {
  return (
    <Handle
      {...props}
      className={cn(
        "dark:border-secondary dark:bg-secondary h-[11px] w-[11px] rounded-full border border-slate-300 bg-slate-100 transition",
        className,
      )}
    >
      {children}
    </Handle>
  );
}

component-example.tsx

import React, { memo } from "react";
import { Position } from "@xyflow/react";
 
import { BaseHandle } from "@/registry/components/base-handle";
import { BaseNode, BaseNodeContent } from "@/registry/components/base-node";
 
const BaseHandleDemo = memo(() => {
  return (
    <BaseNode>
      <BaseNodeContent>
        <BaseHandle id="target-1" type="target" position={Position.Left} />
        <div>A node with two handles</div>
        <BaseHandle id="source-1" type="source" position={Position.Right} />
      </BaseNodeContent>
    </BaseNode>
  );
});
 
BaseHandleDemo.displayName = "BaseHandleDemo";
export default BaseHandleDemo;