Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
"use client";
import "@xyflow/react/dist/style.css";
import {
addEdge,
applyEdgeChanges,
applyNodeChanges,
Background,
type Connection,
type EdgeChange,
type Node,
type NodeChange,
type NodeProps,
type NodeTypes,
ReactFlow,
ReactFlowProvider,
} from "@xyflow/react";
import { useCallback, useState } from "react";
import { TextInputNode } from "@/components/ui/flow/text-input-node";
const TextInputNodeController = ({ id, data, ...props }: NodeProps<Node>) => {
const [value, setValue] = useState("Hello World!");
return (
<TextInputNode
id={id}
data={{
status: "idle",
config: { value },
}}
{...props}
type="text-input"
onTextChange={(value) => setValue(value)}
onDeleteNode={() => {}}
/>
);
};
const nodeTypes: NodeTypes = {
"text-input": TextInputNodeController,
};
const initialNodes = [
{
id: "node-1",
type: "text-input",
position: { x: 0, y: -50 },
data: {},
},
];
export function ResizableNodeDemo() {
const [nodes, setNodes] = useState<Node[]>(initialNodes);
const [edges, setEdges] = useState([]);
// Add default viewport configuration
const defaultViewport = { x: 100, y: 120, zoom: 1.2 };
const onNodesChange = useCallback(
(changes: NodeChange<Node>[]) =>
setNodes((nds) => applyNodeChanges(changes, nds)),
[],
);
const onEdgesChange = useCallback(
(changes: EdgeChange<never>[]) =>
setEdges((eds) => applyEdgeChanges(changes, eds)),
[],
);
const onConnect = useCallback(
(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
[],
);
return (
<div className="w-full h-full">
<ReactFlowProvider>
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
nodeTypes={nodeTypes}
defaultViewport={defaultViewport}
/* fitView */
>
<Background />
</ReactFlow>
</ReactFlowProvider>
</div>
);
}
Overview
The Text Input Node is a simple React Flow component that allows you to input text that can be used by other nodes in your workflow. It provides:
- A resizable textarea for entering and editing text
- A single output handle that sends the entered text to connected nodes
- Visual status feedback for different states
Components Used
This node is built using several React Flow Components:
- Base Node - For the core node structure and styling
- Node Header - For the node's header section
- Labeled Handle - For the output connection point
Installation
pnpm dlx shadcn@latest add @simple-ai/text-input-node
Usage
The Text Input Node requires a controller component to manage its state. Here's how to implement it in your React Flow application:
// Controller component to manage the Text Input Node
const TextInputNodeController = ({
id,
data,
...props
}: NodeProps<Node>) => {
const [value, setValue] = useState("Hello World!");
return (
<TextInputNode
id={id}
data={{
status: "idle",
config: { value },
}}
{...props}
onTextChange={(value) => setValue(value)}
onDeleteNode={() => {}}
/>
);
};
// Register the node type
const nodeTypes = {
"text-input": TextInputNodeController,
};The node provides the following connection point:
- Output:
result: The text content entered in the textarea
The node's features include:
- Resizable textarea for text input
- Status indication (idle, processing, error, success)
- Clean and intuitive interface
- Multi-line text support