Text

A component for explicitly creating text nodes.

Syntax

<Text value="Hello, World!" />
<Text value={dynamicText} />

Description

Text elements create text nodes in the rendered output. While strings in the element tree are automatically converted to text nodes, the Text tag allows you to create text nodes explicitly when needed.

In practice, you rarely need to use Text directly since Crank automatically wraps string children in Text elements during rendering. However, it can be useful for:

Programmatic text node creation
Understanding how Crank's internals work
Edge cases where explicit text nodes are needed

Props

Prop	Type	Description
`value`	`string`	The text content to render

Examples

Explicit text node

import {Text, createElement} from "@b9g/crank";

// These are equivalent:
const implicit = createElement("div", null, "Hello, World!");
const explicit = createElement("div", null,
  createElement(Text, {value: "Hello, World!"})
);

Automatic conversion

function Greeting({name}) {
  // Strings are automatically wrapped in Text elements
  return <div>Hello, {name}!</div>;
}

// Internally becomes something like:
// <div>
//   <Text value="Hello, " />
//   <Text value={name} />
//   <Text value="!" />
// </div>

Understanding text handling

// All of these render the same way:

// 1. Direct string
<div>Hello</div>

// 2. String expression
<div>{"Hello"}</div>

// 3. Number (converted to string)
<div>{42}</div>

// 4. Explicit Text element
<div><Text value="Hello" /></div>

Text in custom renderers

When building custom renderers, the adapter's text() method handles Text elements:

const adapter = {
  text({value, oldNode}) {
    // Create or update a text node
    if (oldNode && oldNode.text !== value) {
      oldNode.text = value;
      return oldNode;
    }
    return {type: "text", text: value};
  },
  // ... other methods
};

API Reference