useEventfulState() has landed! Check Here for more info.

New features and bug fixes will land in the private github repo before becoming available on the Asset Store. To request access to the repo, please send an email or pm Singtaa#4915 on Discord with your Github username and OneJS Order/INV number.

A Basic Example

The script for this example is also available at {ProjectDir}/OneJS/Samples/basic.tsx . To test it, you can change Live Reload component's Entry Script field to Samples/basic.js (note: this is always a .js file), then go into Playmode.

OneJS has 1 to 1 interop between Preact and UI Toolkit. All controls from UI Toolkit can be accessed from your JSX. The following sample code should be self-explanatory. And as you can see, you can use Preact here pretty normally.

import { h, render } from "preact"

const App = () => {
    return (
        <div>
            <label text="Select something to remove from your suitcase:" />
            <box>
                <toggle name="boots" label="Boots" value={true} />
                <toggle name="helmet" label="Helmet" value={false} />
                <toggle name="cloak" label="Cloak of invisibility" />
            </box>
            <box>
                <button name="cancel" text="Cancel" onClick={(e) => log(performance.now())} />
                <button name="ok" text="OK" />
                <textfield onInput={(e) => log(e.newData)} />
            </box>
        </div>
    )
}

render(<App />, document.body)

Here's a quick list of UI Toolkit's default controls:

export interface IntrinsicElements {
    div: VisualElement
    box: Box
    text: TextElement
    label: Label
    image: Image
    foldout: Foldout
    template: Template
    instance: Instance
    templatecontainer: TemplateContainer
    button: Button
    repeatbutton: RepeatButton
    toggle: Toggle
    scroller: Scroller
    slider: Slider
    sliderint: SliderInt
    minmaxslider: MinMaxSlider
    enumfield: EnumField
    progressbar: ProgressBar

    textfield: TextField
    integerfield: IntegerField
    floatfield: FloatField
    vector2field: Vector2Field
    vector2intfield: Vector2IntField
    vector3field: Vector3Field
    vector3intfield: Vector3IntField
    vector4field: Vector4Field
    rectfield: RectField
    rectintfield: RectIntField
    boundsfield: BoundsField
    boundsintfield: BoundsIntField

    listview: ListView
    scrollview: ScrollView
    treeview: TreeView
    popupwindow: PopupWindow

    gradientrect: GradientRect
    flipbook: Flipbook
    simplelistview: SimpleListView
}