Props

Props are used to send data to a children component.

THP’s components can receive any datatype as props, and they are defined as normal parameters.

For example, to receive a String declare it as a parameter:

fun Greeter(String name) -> HTML
{
    <p>Hello {name}!</p>
}thp
    

And to send its value type the parameter name as an attribute:

fun Home() -> HTML
{
    <div>
        <Greeter name="Rose" />
    </div>
}thp
    

<div><p>Hello Rose</p></div>

You can have as many props as you’d like, of any datatype:

fun Greeter(String name, Int age, Array[String] friends) -> HTML
{
    // ...
}thp
    

Static props

If the prop has a type String you can use a normal attribute.

fun Home() -> HTML
{
    <div>
        // name is a String, so we use ""
        <Greeter name="Rose" />
    </div>
}thp
    

Dynamic props

However, if the prop has any other datatype you must use a dynamic attribute ({})

// This component receives a Cat object
fun Sample(Cat cat) -> HTML
{
    // ...
}

fun Home() -> HTML
{
    val my_cat = Cat("Michifu")

    <div>
        <Sample cat={my_cat} />
    </div>
}thp
    

Components as props

If for some reason you want to use a component as a prop use the HTML datatype:

// The parameter can have any name, not only `child`
fun Sample(HTML child) -> HTML
{
    <>
        <p>Sup</p>
        {child}
    </>
}thp
    

This, however, means that your prop component must be declared as an attribute:

fun Home() -> HTML
{
    <div>
        <Sample child={<span>I am the child</span>} />
    </div>
}thp
    

<div>
    <p>Sup</p>
    <span>I am the child</span>
</div>

A better solution may be to use slots.

Slots

Slots allow you to write html inside a component tag.

fun MyButton() -> HTML
{
    <button>
        // This is the slot, it will render the HTML inside the tag
        <Slot />
    </button>
}

fun Home() -> HTML
{
    <div>
        <MyButton>
            buy <b>now!</b>
        </MyButton>
    </div>
}thp
    

<div>
    <button>
        buy <b>now!</b>
    </button>
</div>