Props

Props allow you to send values from a GOX Template to a Client component.

Each attribute written on the Client tag becomes a property available for the JavaScript component:

<@Welcome name="George" age={{10}} />

The component receives an object equivalent to:

{
    name: "George",
    age: 10
}

The component React receives the props by means of the object provided to the function:

export default function Welcome({ name, age }) {
    return <p>Bienvenidos al cumpleaños número {age} de {name}</p>
}

Props may contain static values, Go expressions and boolean values.

Static Props

The static props are written by a name and a value between quotes:

<@Card name="George" theme="dark" />

Static values always reach the component as text strings.

In this example, name contains "George" and theme contains "dark".

Dynamic Props

A prop can receive the result of an expression of Go:

func ShowCounter() gox.Action {
    name := "George"
    visits := 10

    return <@Counter name={{name}} visits={{visits}} />
}

The expression retains the type of value when sent to the component. In this example, name comes as a string of text and visits like a number.

Dynamic props can use variables, operations, fields, collection elements and calls to valid functions in Go.

Boolean props

A priceless written prop represents true:

<@Menu compact />

The component receives:

{
    compact: true
}

An expression should be used to send a dynamic boolean value:

func ShowMenu() gox.Action {
    compact := false

    return <@Menu compact={{compact}} />
}

Write "false" between quotes sends a text string, not the Boolean value false:

<@Menu compact="false" />

Types of values

Props are transferred by JSON-compatible values.

func ShowProfile() gox.Action {
    user := struct {
        Name string `json:"name"`
        Age  int    `json:"age"`
    }{
        Name: "George",
        Age:  30,
    }

    return <@Profile user={{user}} />
}

The fields exported from a structure are sent in accordance with go's JSON serialization rules, including names defined by tags json.

Values which JSON cannot represent, such as functions, channels, complex numbers or structures with circular references should not be used.

Collections and structures

Arrays, slices, maps and structures can be sent directly by means of expressions:

func ShowMenu() gox.Action {
    items := []string{"Inicio", "Perfil", "Configuración"}

    return <@Menu items={{items}} />
}

The component receives items as an array of JavaScript.

The nested values should also be compatible with JSON.

Prop nil

An expression of value nil is sent as null:

func ShowProfile() gox.Action {
    var avatar any

    return <@Profile avatar={{avatar}} />
}

Prop continues to be part of the object received by the component, but its value will be null.

The attribute :spread

:spread allows to send several props from a map:

func ShowMenu() gox.Action {
    props := map[string]any{
        "name":    "George",
        "compact": true,
        "count":   10,
    }

    return <@Menu :spread={{props}} />
}

Each map key becomes the name of a prop.

Client supports the following types for :spread:

map[string]any
map[string]string

It can also be combined with directly declared props:

<@Menu theme="dark" :spread={{props}} />

When a prop appears directly and also within :spread, the value contained in :spread.

If several are used :spread, the last value prevails over the repeated keys of the previous ones.

Prop names

The name written on the tag is kept when sent to the component:

<@Profile userName="George" showAvatar />

The component receives the properties userName and showAvatar with those same names.

The names distinguish between capital letters and lower letters. userName and username They represent different props.

The prop called props is not reserved and can be sent as any:

<@Menu props={{menuConfig}} />

Reserved props

GOX reserves the following props to control the behavior of the Client component:

These props are processed by GOX and are not part of the object received by the JavaScript component.

See Hydrate, Transition e Isolate to know their values and behaviors.

Internal attributes data-props, data-script, data-assets, data-hydrate, data-transition and data-isolate they are also reserved and cannot be declared manually.

Component content

The content written on a Client tag works as an SSRT (Server-Side Rendered Template):

<@Welcome hydrate="load" transition="fade" name="George">
    <p>Cargando componente...</p>
</@Welcome>

The SSRT is static HTML content generated by GOX on the server. It does not run the JavaScript component or automatically send it as a prop called children.

It can be combined with GOX components, templates and server logic to define the initial state to be shown before loading the actual component.

The prop transition allows to encourage the change between the SSRT and the activated component. Transition to know how it works.

Integration with Go

Dynamic props use expressions and types of Go, allowing to prepare values with the same variables, structures and collections used in the rest of the module.

Although the values are finally delivered to JavaScript, your statement maintains a familiar form for Go developers and does not require manually building the object received by the component.

Best practices

• It uses static props for constant values.
• It uses expressions to keep boolean, numbers, collections and structures.
• Do not write Boolean in quotes when the component needs a Boolean value.
• It only sends JSON-compatible values.
• Use tags json to control the names of the fields of a structure.
• Use :spread when the props are already grouped in a map.
• Avoid combining direct and :spread with repeated keys.
• It retains prop names consistent with those used by the framework.

To learn more about ClientSee your documentation. To learn more about Client declarationsSee your documentation. To learn more about Expressions, check your documentation.

See also

• Client
• Client declarations
• Hydrate
• Transition
• Isolate
• Expressions