Heim
react-flow-node-ts
microsoft/skills
Erstellen Sie React Flow-Knotenkomponenten mit TypeScript-Typen, Handles und Zustand-Speicherintegration zum Erstellen benutzerdefinierter Knoten in visuellen Workflow-Editoren.
...Alle erweiternReact Flow Node
Erstellen Sie React Flow Node-Komponenten gemäß etablierten Mustern mit korrekten TypeScript-Typen und Store-Integration.
Schnellstart
Kopieren Sie Vorlagen aus assets/ und ersetzen Sie Platzhalter:
{{NodeName}}→ PascalCase-Komponentenname (z. B.VideoNode){{nodeType}}→ kebab-case-Typkennung (z. B.video-node){{NodeData}}→ Name der Daten-Schnittstelle (z. B.VideoNodeData)
Vorlagen
- assets/template.tsx - Node-Komponente
- assets/types.template.ts - TypeScript-Definitionen
Node-Komponentenmuster
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></noderesizer><handle></handle>
{/* Node-Inhalt */}
<handle></handle>
>
);
});
Typdefinitions muster
export interface MyNodeData extends Record<string> {
title: string;
description?: string;
}
export type MyNode = Node<mynodedata>;
</mynodedata></string>Integrationsschritte
- Typ zu
src/frontend/src/types/index.tshinzufügen - Komponente in
src/frontend/src/components/nodes/erstellen - Export aus
src/frontend/src/components/nodes/index.ts - Standardwerte in
src/frontend/src/store/app-store.tshinzufügen - In Canvas
nodeTypesregistrieren - Zu AddBlockMenu und ConnectMenu hinzufügen
---
name: react-flow-node-ts
description: Create React Flow node components with TypeScript types, handles, and Zustand store integration for building custom nodes in visual workflow editors.
license: MIT
---
# React Flow Node
Create React Flow node components following established patterns with proper TypeScript types and store integration.
## Quick Start
Copy templates from [assets/](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](assets/template.tsx) - Node component
- [assets/types.template.ts](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
Alle Dateien
0 Dateienreact-flow-node-ts installieren
Laden Sie die Skill-Dateien herunter und extrahieren Sie diese in Ihr .claude/skills/-Verzeichnis.
ZIP herunterladenKlonen Sie das Repository und kopieren Sie die Skill-Dateien in Ihr Projekt.
git clone https://github.com/microsoft/skills/tree/main/.github/plugins/azure-sdk-typescript/skills/react-flow-node-ts # Copy SKILL.md to your .claude/skills/ directory
Kopieren
