React Flow节点TypeScript模板 - 快速创建自定义节点组件与状态管理集成

react-flow-node-ts by sickn33/antigravity-awesome-skills

101 周安装量

31,100 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill react-flow-node-ts

数据可视化 React TypeScript

🇨🇳中文介绍

React Flow 节点

遵循既定模式创建 React Flow 节点组件，包含正确的 TypeScript 类型和存储集成。

快速开始

从 assets/ 目录复制模板并替换占位符：

{{NodeName}} → 帕斯卡命名法组件名（例如：VideoNode）
{{nodeType}} → 短横线命名法类型标识符（例如：video-node）
{{NodeData}} → 数据接口名称（例如：VideoNodeData）

模板

assets/template.tsx - 节点组件
assets/types.template.ts - TypeScript 定义

节点组件模式

export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);
  
  return (
    <>
      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
      <div className="node-container">
        <Handle type="target" position={Position.Top} />
        {/* 节点内容 */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

React Flow Node

Create React Flow node components following established patterns with proper TypeScript types and store integration.

Quick Start

Copy templates from assets/ and replace placeholders:

{{NodeName}} → PascalCase component name (e.g., VideoNode)
{{nodeType}} → kebab-case type identifier (e.g., video-node)
{{NodeData}} → Data interface name (e.g., VideoNodeData)

Templates

assets/template.tsx - Node component
assets/types.template.ts - TypeScript definitions

Node Component Pattern

export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);
  
  return (
    <>
      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
      <div className="node-container">
        <Handle type="target" position={Position.Top} />
        {/* Node content */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});

Type Definition Pattern

export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

export type MyNode = Node<MyNodeData, 'my-node'>;

Integration Steps

Add type to src/frontend/src/types/index.ts
Create component in src/frontend/src/components/nodes/
Export from src/frontend/src/components/nodes/index.ts
Add defaults in src/frontend/src/store/app-store.ts
Register in canvas nodeTypes
Add to AddBlockMenu and ConnectMenu

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Weekly Installs

Repository

sickn33/antigra…e-skills

GitHub Stars

28.1K

First Seen

Feb 16, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex87

opencode86

gemini-cli86

github-copilot86

amp85

kimi-cli85