Component basics

FuncUI offers a Component inspired by ReactJS. Components allow you to organize views into reusable pieces.

There are two ways of creating a component.

Component (fun ctx -> ...)

Creating a component using the regular constructor of the Component class. Component inherits from Border and therefore can be used like any other Avalonia control.

// create a Component that can be directly used in a Avalonia app
let component: Component = Component (fun ctx -> 
    TextBlock.create [
        TextBlock.text "Hello World!"
    ]
)

// use component as main view of an app
type MainWindow() as this =
    inherit HostWindow()
    do
        this.Content <- component

// embedd component in avalonia app
let control: ContentControl = ..
control.Content <- component
// Creating a component using the View DSL.
// The resulting IView can be used inside other components and with the View DSL.

Component.create ("key", fun ctx -> ...)

Declaratively describes a component. Can be embedded in other views as this returns an IView

let greetingView (): IView = 
    Component.create ("greetingView", fun ctx -> 
        TextBlock.create [
            TextBlock.text "Hello World!"
        ]
    )

let view (): IView = 
    Component.create ("mainView", fun ctx -> 
        DockPanel.create [
            DockPanel.children [
                // use other component
                greetingView ()
            ]
        ]
    )