Button Handle

A handle component with a button attached.

Dependencies:

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/button-handle


pnpm dlx shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/button-handle


yarn dlx shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/button-handle


bun x shadcn@latest add https://ui-components-git-dependabot-npmandyarnxyflow-bca43e-xyflow.vercel.app/button-handle

Usage

1. Copy the component into your app


import { Plus } from "lucide-react";
import { ConnectionState, Position, useConnection } from "@xyflow/react";
 
import { ButtonHandle } from "@/components/button-handle";
import { BaseNode, BaseNodeContent } from "@/components/base-node";
 
import { Button } from "@/components/ui/button";
 
const onClick = () => {
  window.alert(`Handle button has been clicked!`);
};
 
const selector = (connection: ConnectionState) => {
  return connection.inProgress;
};
 
const ButtonHandleDemo = () => {
  const connectionInProgress = useConnection(selector);
 
  return (
    <BaseNode>
      <BaseNodeContent>
        Node with a handle button
        <ButtonHandle
          type="target"
          position={Position.Bottom}
          showButton={!connectionInProgress}
        >
          <Button
            onClick={onClick}
            size="sm"
            variant="secondary"
            className="rounded-full"
          >
            <Plus size={10} />
          </Button>
        </ButtonHandle>
      </BaseNodeContent>
    </BaseNode>
  );
};
 
export default ButtonHandleDemo;

2. Connect the component with your React Flow application.


import { Background, ReactFlow } from "@xyflow/react";
 
import SourceHandleDemo from "./component-example";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 0, y: 0 },
    data: { label: "Node" },
    type: "sourceHandleDemo",
  },
];
 
const nodeTypes = {
  sourceHandleDemo: SourceHandleDemo,
};
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>
        <Background />
      </ReactFlow>
    </div>
  );
}