Custom 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)