节点搜索

¥Node Search

一个可用于在流程中搜索节点的搜索栏组件。

¥A search bar component that can be used to search for nodes in the flow.

它使用了 shadcn ui 中的命令组件。

¥It uses the Command component from shadcn ui .

默认情况下，它会检查节点标签中是否包含小写字符串，并在选中节点时选择该节点并使视图适应该节点。你可以通过传递自定义的 onSearch 函数来覆盖此行为。你还可以覆盖默认的 onSelectNode 函数，以自定义节点被选中时的行为。

¥By default, it will check for lowercase string inclusion in the node’s label, and select the node and fit the view to the node when it is selected. You can override this behavior by passing a custom onSearch function. You can also override the default onSelectNode function to customize the behavior when a node is selected.

Dependencies:

@xyflow/react cmdk shadcn/ui/command

Installation

Make sure to follow the prerequisites before installing the component.


npx shadcn@latest add https://ui.reactflow.dev/node-search


pnpm dlx shadcn@latest add https://ui.reactflow.dev/node-search


yarn dlx shadcn@latest add https://ui.reactflow.dev/node-search


bun x shadcn@latest add https://ui.reactflow.dev/node-search

Usage

1. Connect the component with your React Flow application.


import { NodeSearch } from "@/registry/components/node-search/";
import { Background, Node, Panel, ReactFlow } from "@xyflow/react";
 
type NodeData = {
  label: string;
};
 
const graphSize = 20;
 
const initNodes: Node<NodeData>[] = Array.from(
  { length: graphSize },
  (_, index) => {
    // Calculate grid dimensions (aim for roughly square grid)
    const cols = Math.ceil(Math.sqrt(graphSize));
    const rows = Math.ceil(graphSize / cols);
 
    // Calculate position in grid
    const col = index % cols;
    const row = Math.floor(index / cols);
 
    // Grid spacing
    const spacing = 200;
    const startX = 100;
    const startY = 100;
 
    return {
      id: `node-${index}`,
      data: { label: `Node ${index}` },
      position: {
        x: startX + col * spacing,
        y: startY + row * spacing,
      },
    };
  },
);
 
export default function App() {
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={initNodes} defaultEdges={[]} fitView>
        <Background />
        <Panel
          className="flex gap-1 rounded-md bg-primary-foreground p-1 text-foreground"
          position="top-left"
        >
          <NodeSearch />
        </Panel>
      </ReactFlow>
    </div>
  );
}