Function that renders props and context to a VNode
Optionaloptions: Readonly<{ name?: string }>Optional configuration
Factory function that creates widget VNodes
const Counter = defineWidget<{ initial: number; key?: string }>((props, ctx) => {
const [count, setCount] = ctx.useState(props.initial);
return ui.row([
ui.text(`Count: ${count}`),
ui.button({
id: ctx.id("inc"),
label: "+",
onPress: () => setCount(c => c + 1)
}),
]);
});
// Usage:
ui.column([
Counter({ initial: 0 }),
Counter({ initial: 10, key: "counter-2" }),
]);
Define a reusable widget with local state and lifecycle.
The render function receives props and a WidgetContext for managing per-instance state. Each instance of the widget maintains its own state that persists across renders.