Text#

Text displays inline text content. Maps to UI Toolkit's TextElement.

Import#

import { Text } from "onejs-react"

Basic Usage#

<Text text="Hello, World!" />

Or with children (raw text):

<View>
    Hello, World!
</View>

Raw text inside JSX elements automatically creates TextElement instances.

Props#

Prop	Type	Description
`text`	`string`	Text content (alternative to children)
`style`	`ViewStyle`	Inline styles
`className`	`string`	USS class name(s)
`children`	`ReactNode`	Child content

Text vs Label#

Both display text, but they have different purposes:

Component	Use Case
`<Text>`	Primary text display, inline content
`<Label>`	Form labels, semantic labeling

// Use Text for content
<Text text="Welcome to our app" style={{ fontSize: 24 }} />

// Use Label for form fields
<View>
    <Label text="Username" />
    <TextField placeholder="Enter username" />
</View>

Styling#

<Text
    text="Styled text"
    style={{
        fontSize: 18,
        color: "#ffffff",
        fontStyle: "bold",
        unityTextAlign: "middle-center",
    }}
/>

Text Alignment#

<View style={{ width: 200 }}>
    <Text text="Left aligned" style={{ unityTextAlign: "upper-left" }} />
    <Text text="Centered" style={{ unityTextAlign: "upper-center" }} />
    <Text text="Right aligned" style={{ unityTextAlign: "upper-right" }} />
</View>

Available alignment values:

upper-left, upper-center, upper-right
middle-left, middle-center, middle-right
lower-left, lower-center, lower-right

Wrapping#

// Allow wrapping (default)
<Text
    text="This is a long text that will wrap to multiple lines"
    style={{ whiteSpace: "normal", width: 200 }}
/>

// Prevent wrapping
<Text
    text="This text stays on one line"
    style={{ whiteSpace: "nowrap" }}
/>

Text that wraps when it should not#

A Text sized by its own content can be measured narrower than it draws, and then it wraps where you did not ask it to. The element is laid out for one line, the render produces two, and whatever comes next is positioned over the second one.

letterSpacing on a large fontSize is the combination that provokes it, because the measure and the render disagree by a little per character and a headline has a lot of characters.

Give the text an explicit width and an alignment, so both passes work from a width decided before either of them ran:

<Text style={{
    width: "100%",
    unityTextAlign: "middle-center",
    fontSize: 48,
    letterSpacing: 2,
}}>YOU WIN</Text>

Adding whiteSpace: "nowrap" makes it certain. If you do, the font size has to follow the available width, or you have swapped a collision for a word running off the side of a narrow screen:

fontSize: Math.round(Math.min(48, containerWidth / 9))

Dynamic Content#

function Counter() {
    const [count, setCount] = useState(0)

    return (
        <View>
            <Text text={`Count: ${count}`} style={{ fontSize: 20 }} />
            <Button text="Increment" onClick={() => setCount(c => c + 1)} />
        </View>
    )
}

Inline with Other Elements#

<View style={{ flexDirection: "row", alignItems: "center" }}>
    <Text text="Status: " />
    <Text text="Online" style={{ color: "#00ff00" }} />
</View>