Text Input Node

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 https://simple-ai.dev/r/text-input-node.json

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