Custom Controls

Custom Controls from all loaded assemblies will be automatically included in the OneJS runtime.

Custom Controls inherit from VisualElement and are written entirely in C#. They’re sort of analogous to Web Components and are good for when you need something super reusable or performant.

OneJS comes with a few by default.

OneJS.Dom.Flipbook
OneJS.Dom.GradientRect
OneJS.Dom.Img

You can use them directly or check out the source as a reference for making your own.

Flipbook

Flipbook can be used for animating spritesheets.

flipbook.tsx


import { h, render } from "onejs-preact"
 
const lightningTexture = resource.loadImage("assets/lightning.png")
 
// Resources folder alternative
// const lightningTexture = CS.UnityEngine.Resources.Load("lightning") as CS.UnityEngine.Texture2D 
 
const App = () => {
    return <div class="w-full h-full items-center justify-center">
        <flipbook src={lightningTexture} num-per-row={8} count={64} interval={0.025} random-rotation={true} style={{ width: 200, height: 200 }} />
    </div>
}
 
render(<App />, document.body)

GradientRect

GradientRect is a simple container that uses a 4-corner gradient for the background color.

gradient-rect.tsx


import { render, h } from "preact"
import { parseColor as c } from "onejs/utils/color-parser"
 
const App = () => {
    return <div>
        <gradientrect colors={[c("#02BC23"), c("#48E025")]} style={{ width: 100, height: 100 }} />
        <gradientrect colors={[c("red"), c("#00A0E6"), c("#00A0E6"), c("red")]} style={{ width: 100, height: 100 }} />
    </div>
}
 
render(<App />, document.body)

Img

Img allows you to load images with remote URLs.

img.tsx


import { render, h } from "preact"
 
const App = () => {
    return <div class="h-full w-full">
        <img src="https://cdn2.thecatapi.com/images/acv.jpg" />
    </div>
}
 
render(<App />, document.body)