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" }}
/>

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>