aa71e76eb9
- Add date_added to all 950+ skills for complete tracking - Update version to 6.5.0 in package.json and README - Regenerate all indexes and catalog - Sync all generated files Features from merged PR #150: - Stars/Upvotes system for community-driven discovery - Auto-update mechanism via START_APP.bat - Interactive Prompt Builder - Date tracking badges - Smart auto-categorization All skills validated and indexed. Made-with: Cursor
73 lines
2.0 KiB
Markdown
73 lines
2.0 KiB
Markdown
---
|
|
name: react-flow-node-ts
|
|
description: "Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing no..."
|
|
risk: unknown
|
|
source: community
|
|
date_added: "2026-02-27"
|
|
---
|
|
|
|
# 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
|
|
|
|
```tsx
|
|
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
|
|
|
|
```typescript
|
|
export interface MyNodeData extends Record<string, unknown> {
|
|
title: string;
|
|
description?: string;
|
|
}
|
|
|
|
export type MyNode = Node<MyNodeData, 'my-node'>;
|
|
```
|
|
|
|
## Integration Steps
|
|
|
|
1. Add type to `src/frontend/src/types/index.ts`
|
|
2. Create component in `src/frontend/src/components/nodes/`
|
|
3. Export from `src/frontend/src/components/nodes/index.ts`
|
|
4. Add defaults in `src/frontend/src/store/app-store.ts`
|
|
5. Register in canvas `nodeTypes`
|
|
6. Add to AddBlockMenu and ConnectMenu
|
|
|
|
## When to Use
|
|
This skill is applicable to execute the workflow or actions described in the overview.
|