How to receive an optional parameter in a component? #844

henriqueleite42 · 2024-07-11T15:24:45Z

henriqueleite42
Jul 11, 2024

I have the following component:

templ DefaultLayout(title string, head templ.Component) {
	<!DOCTYPE html>
	<html lang="pt-br">
		<head>
			<meta charset="UTF-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<title>{ title }</title>
			@head
		</head>
		<body>
			{ children... }
		</body>
	</html>
}

And I want head to be optional, is it possible?

Answered by a-h

Jul 12, 2024

Yes, there's a couple of ways. templ just creates a Go function, so it's the same as Go.

`templ.Component` is an interface, so it can be nil.

templ DefaultLayout(title string, head templ.Component) {
	<!DOCTYPE html>
	<html lang="pt-br">
		<head>
			<meta charset="UTF-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<title>{ title }</title>
			if head != nil {
				@head
			}
		</head>
		<body>
			{ children... }
		</body>
	</html>
}

Use a struct to take params

type DefaultLayoutProps {
	Title string
	Head templ.Component
}

templ DefaultLayout(props DefaultLayoutProps) {
	<!DOCTYPE html>
	<html lang="pt-br">
		<head>
			<meta charset="UTF-8"/>
			<meta name="…

View full answer

a-h · 2024-07-12T09:10:48Z

a-h
Jul 12, 2024
Maintainer

Yes, there's a couple of ways. templ just creates a Go function, so it's the same as Go.

`templ.Component` is an interface, so it can be nil.

templ DefaultLayout(title string, head templ.Component) {
	<!DOCTYPE html>
	<html lang="pt-br">
		<head>
			<meta charset="UTF-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<title>{ title }</title>
			if head != nil {
				@head
			}
		</head>
		<body>
			{ children... }
		</body>
	</html>
}

Use a struct to take params

type DefaultLayoutProps {
	Title string
	Head templ.Component
}

templ DefaultLayout(props DefaultLayoutProps) {
	<!DOCTYPE html>
	<html lang="pt-br">
		<head>
			<meta charset="UTF-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<title>{ props.Title }</title>
			if props.Head != nil {
				@props.Head
			}
		</head>
		<body>
			{ children... }
		</body>
	</html>
}

Use functional options pattern

See https://golang.cafe/blog/golang-functional-options-pattern.html

I haven't tested this, so view it as psuedo-code.

type DefaultLayoutOpt func(p *DefaultLayoutProps)

func WithTitle(title string) DefaultLayoutOpt {
	return func(p *DefaultLayoutProps) {
		p.Title = title
	}
}

func WithHead(c templ.Component) DefaultLayoutOpt {
	return func(p *DefaultLayoutProps) {
		p.Head = c
	}
}

func DefaultLayout(opts DefaultLayoutOpt...) templ.Component {
	p := &DefaultLayoutProps{
		Title: "default",
		Head: nil,
	}
	for _, opt := range opts {
		opt(p)
	} 
	return defaultLayout(*p)
}

type DefaultLayoutProps {
	Title string
	Head templ.Component
}

templ defaultLayout(props DefaultLayoutProps) {
	<!DOCTYPE html>
	<html lang="pt-br">
		<head>
			<meta charset="UTF-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<title>{ props.Title }</title>
			if props.Head != nil {
				@props.Head
			}
		</head>
		<body>
			{ children... }
		</body>
	</html>
}

Use a chained builder

https://hackernoon.com/go-design-patterns-an-introduction-to-builder

1 reply

henriqueleite42 Jul 12, 2024
Author

Thanks, amazing answer!

Just an extra tip of how to use components that receive components without having to really use a component or do a if validation:

// DefaultLayout is the one from the question
templ NewLayout(title string, head templ.Component) {
	@DefaultLayout("foo", templ.NopComponent)
}

Ref: https://github.com/a-h/templ/blob/main/runtime.go#L74

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to receive an optional parameter in a component? #844

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

How to receive an optional parameter in a component? #844

henriqueleite42 Jul 11, 2024

templ.Component is an interface, so it can be nil.

Use a struct to take params

Replies: 1 comment · 1 reply

a-h Jul 12, 2024 Maintainer

templ.Component is an interface, so it can be nil.

Use a struct to take params

Use functional options pattern

Use a chained builder

henriqueleite42 Jul 12, 2024 Author

henriqueleite42
Jul 11, 2024

`templ.Component` is an interface, so it can be nil.

Replies: 1 comment 1 reply

a-h
Jul 12, 2024
Maintainer

`templ.Component` is an interface, so it can be nil.

henriqueleite42 Jul 12, 2024
Author