View

View is the basic layout container. It maps to UI Toolkit's VisualElement.

Import

import { View } from "onejs-react"

Basic Usage

<View style={{ padding: 20, backgroundColor: "#1a1a1a" }}>
    <Label text="Content inside a View" />
</View>

Props

Prop	Type	Description
`style`	`ViewStyle`	Inline styles
`className`	`string`	USS class name(s)
`children`	`ReactNode`	Child elements
`onClick`	`(e) => void`	Click handler
`onPointerDown`	`(e) => void`	Pointer down handler
`onPointerUp`	`(e) => void`	Pointer up handler
`onPointerMove`	`(e) => void`	Pointer move handler
`onPointerEnter`	`(e) => void`	Pointer enter handler
`onPointerLeave`	`(e) => void`	Pointer leave handler

Flexbox Layout

View uses flexbox by default. Column direction is the default:

// Vertical stack (default)
<View>
    <Label text="First" style={{ marginBottom: 10 }} />
    <Label text="Second" style={{ marginBottom: 10 }} />
    <Label text="Third" />
</View>

// Horizontal row
<View style={{ flexDirection: "row" }}>
    <Button text="One" style={{ marginRight: 10 }} />
    <Button text="Two" style={{ marginRight: 10 }} />
    <Button text="Three" />
</View>

> Note: USS doesn't support the gap property. Use margins on child elements instead.

Common Layouts

Centered Content

<View style={{
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
}}>
    <Label text="Centered" />
</View>

Space Between

<View style={{
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 20,
}}>
    <Label text="Left" />
    <Label text="Right" />
</View>

Flexible Children

<View style={{ flexDirection: "row", height: 100 }}>
    <View style={{ flexGrow: 1, backgroundColor: "#333" }} />
    <View style={{ flexGrow: 2, backgroundColor: "#555" }} />
    <View style={{ flexGrow: 1, backgroundColor: "#777" }} />
</View>

Absolute Positioning

<View style={{ position: "relative", height: 200 }}>
    <View style={{
        position: "absolute",
        top: 10,
        right: 10,
        width: 50,
        height: 50,
        backgroundColor: "red",
    }} />
</View>

Interactive View

function ClickableCard() {
    const [active, setActive] = useState(false)

    return (
        <View
            style={{
                padding: 20,
                backgroundColor: active ? "#0066cc" : "#333",
                borderRadius: 8,
            }}
            onClick={() => setActive(!active)}
        >
            <Label text={active ? "Active" : "Click me"} />
        </View>
    )
}