Label

Label displays text. Maps to UI Toolkit's Label.

Import

import { Label } from "onejs-react"

Basic Usage

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

Props

Prop	Type	Description
`text`	`string`	Text content
`style`	`ViewStyle`	Inline styles
`className`	`string`	USS class name(s)

Text Styling

// Heading
<Label
    text="Page Title"
    style={{
        fontSize: 32,
        fontStyle: "bold",
        color: "#ffffff",
        marginBottom: 20,
    }}
/>

// Paragraph
<Label
    text="This is body text with normal styling."
    style={{
        fontSize: 16,
        color: "#999999",
        marginBottom: 10,
    }}
/>

// Caption
<Label
    text="Small caption text"
    style={{
        fontSize: 12,
        color: "#666666",
    }}
/>

Text Alignment

<Label
    text="Centered text"
    style={{
        unityTextAlign: "middle-center",
        width: "100%",
    }}
/>

// Alignment options:
// "upper-left", "upper-center", "upper-right"
// "middle-left", "middle-center", "middle-right"
// "lower-left", "lower-center", "lower-right"

Dynamic Text

function Score({ value }) {
    return <Label text={`Score: ${value}`} style={{ fontSize: 24 }} />
}

function Timer({ seconds }) {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return (
        <Label
            text={`${mins}:${secs.toString().padStart(2, '0')}`}
            style={{ fontSize: 48, fontStyle: "bold" }}
        />
    )
}

Rich Text

UI Toolkit supports basic rich text tags:

<Label text="<b>Bold</b> and <i>italic</i> text" />
<Label text="<color=#ff0000>Red text</color>" />
<Label text="<size=24>Large</size> and <size=12>small</size>" />

Text Wrapping

<Label
    text="This is a long text that will wrap to multiple lines when it exceeds the container width."
    style={{
        width: 200,
        whiteSpace: "normal",  // Enable wrapping
    }}
/>