Components

The components allow to divide an interface into reusable parts.

In GOX, a component is simply a Go function that returns a gox.ComponentThis means that there is no special syntax to declare them or a different language to write their logic. A component behaves like any other Go function and can be used from any project template.

func Button(text string) gox.Component {

	return <button>{{ text }}</button>
}

Once declared, the component can be used by syntax <&Componente />.

<&Button text="Guardar" />

The components can be declared in any package of the project and used from anywhere where they are visible to Go.

Parameters

The parameters of a component are specified by attributes. Each attribute is related to the parameter that has the same name in the signature of the function.

func Card(title string, count int) gox.Component {

	return <article class="card">

		<h2>{{ title }}</h2>

		<span>{{ count }}</span>

	</article>
}

When using the component, attributes can be written in any order.

<&Card title="Usuarios" count={{ totalUsers }} />

<&Card count={{ totalUsers }} title="Usuarios" />

Both examples are completely equivalent.

All parameters declared by the function should be specified when using the component. If a parameter is missing, if a parameter is specified more than once, or if an attribute that does not exist in the component signature is used, the compiler will generate an error.

Literal values and expressions use exactly the same syntax as HTML attributes. If you do not yet know this syntax, see the documentation of Attributes and Expressions.

Children

In addition to receiving parameters, a component can also receive content between its opening tag and its closing tag. children.

func Card(title string, children gox.Component) gox.Component {

	return <article class="card">

		<h2>{{ title }}</h2>

		<&children />

	</article>
}

The content is written between both component tags.

<&Card title="Perfil">
	<p>Información del usuario.</p>
</&Card>

The tag <&children /> It renders the content received by the component.

It can also be used with backup content.

<&children>
	<p>No hay contenido.</p>
</&children>

When the component receives child content, it will normally be renderized. If it does not receive any content, GOX will renderize the content defined between the tags. <&children>.

This is particularly useful for defining default content without adding additional conditions to the component.

Inline components

It is not always necessary to declare a function to reuse an interface fragment.

A template can also be stored directly in a variable and later used as a component.

link := <a href="/profile">Mi perfil</a>

It can also be explicitly declared as a gox.Component.

var link gox.Component = <a href="/profile">Mi perfil</a>

Once declared, it can be rendered the same as any other component.

<&link />

Unlike the components declared by functions, the inline components do not define parameters. That's why they are always used without attributes.

<&link class="primary" />

The above example produces a compilation error.

Although they do not accept parameters, the inline components can use any variable or expression available in the area where they were declared.

href := "/profile"
text := "Mi perfil"

link := <a href={{ href }}>{{ text }}</a>

Inline components are especially useful for reusing small interface fragments within the same function without the need to declare an independent component.

Go logic

A component is a normal Go function, so you can use any language feature.

You can declare variables, call other functions and use structures like if, switch and for to build different interfaces according to the needs of the application.

func UserCard(user User) gox.Component {

	name := strings.ToUpper(user.Name)

	if user.Admin {
		return <AdminCard user={{ user }} />
	}

	return <Card title={{ name }} />
}

This allows you to prepare the data before you build the Template and maintain all the logic of the component using Go, without introducing additional language to write the interface.

Nested components

The components can use other components without any restrictions.

<&Layout>
	<&Card title="Perfil">
		<&Button text="Guardar" />
	</&Card>
</&Layout>

This capacity allows complex interfaces to be built from small and reusable components, keeping each component focused on a single responsibility.

Integration with Go

The components directly use the rules of the Go language.

GOX does not introduce an independent component model. The components are part of the GOX programming model and directly take advantage of the features of the Go language, such as functions, parameters, variable range and control flow. This allows you to build reusable interfaces without learning a second language to describe your behavior.

This means that:

• The parameters follow the same rules as any other Go function.
• Local variables use the same range as in Go.
• Calls to functions and methods work exactly the same as in any other Go file.
• All the logic of the component is written using Go, including structures like if, switch and for.
• The inline components follow the same Go range rules and can access the available variables at the place where they were declared.

To understand how GOX evaluates the expressions used within a component, see the documentation of Expressions.

Best practices

• Keep the components small and focused on a single responsibility.
• It uses parameters to configure the behavior of a component rather than duplicate templates.
• It removes a component when part of the interface begins to be reused in several locations.
• It uses inline components to reuse small interface fragments within the same function.
• Take advantage of Go's logic to prepare the data before building the Template.

To learn more about Conditions, check your documentation.

See also

• Attributes
• Expressions
• Conditions