Skip to Content
DocumentationCORECustom Controls

Custom Controls have to be in the OneJS.Dom namespace if you want them to be automatically included in the OneJS runtime.

Custom Controls  inherit from VisualElement and are written entirely in C#. They’re a solid choice when you need something super reusable or you’re aiming for the best performance.

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 { render, h } from "preact"
import { ImageLoader } from "OneJS/Utils"
 
const lightningTexture = ImageLoader.Load(__dirname + "/resources/lightning.png")
 
const App = () => {
    return <div>
        <flipbook src={lightningTexture} num-per-row={8} count={32} interval={0.025} random-rotation={true} style={{ width: 100, height: 100 }} />
    </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)
Resource LoadingDebugger