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
╰╴No statement matched
{
  <p>Hello {name}!p>
}
thp

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

fun Home() -> HTML
╰╴No statement matched
{
  <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
╰╴No statement matched
{
  // ...
}
thp

Static props

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

fun Home() -> HTML
╰╴No statement matched
{
  <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
  ╰╴No statement matched
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`
  ╰╴No statement matched
fun Sample(HTML child) -> HTML
{
  <>
      <p>Supp>
      {child}
  
}
thp

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

fun Home() -> HTML
╰╴No statement matched
{
  <div>
      <Sample child={<span>I am the childspan>} />
  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
╰╴No statement matched
{
  <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>