Property Inheritance

[claritydistro-nick]

I am looking for a way to make a property defined on a parent component available to a children component without having to pass it in as template property at both levels.

For instance:

templ Field(isRequired bool) {
  <div class="field">{ children... }</div>
}

templ Label(msg string) {
  <span class="label">
    {msg}
    if isRequired() { (required) }
   </span>
}

templ Main() {
  @Field(true) {
    @Label("Hi!")
  }
  
  @Field(false) {
    @Label("Hi!")
  }
}

Output:

Hi! (required)

Hi!

My initial thought was "you can do this by abusing context". Something like this:

templ Field(isRequired bool) {
  <div class="field">{ renderChildren(ctx, ) }</div>
}

func renderChildren(
  ctx context.Context,
  isRequired bool,
) string {
  ctx = context.WithValue(ctx, "isRequired", isRequired)
  children := templ.GetChildren(ctx)
  
  buf := new(bytes.Buffer)
  children.Render(ctx, buf)
  return buf.String()
}

This doesn't work as children is nil when renderChildren is invoked.

Is this sort of abuse of context possible? Or is there another way to make this sort of property inheritance work? Ideally this would work something like ContextProviders do in the React world.

[joerdav]

I believe you could use some go code for this purpose:

templ Field(isRequired bool) {
  {{ ctx = context.WithValue(ctx, "isRequired", isRequired) }}
  <div class="field">{ children... }</div>
}

I'd recommend "prop-drilling" instead though, but that is a personal opinion.

[a-h]

There's a section in the docs about it: https://templ.guide/syntax-and-usage/context/#prop-drilling

Don't forget that templ components are just Go code that has a Render method. You could probably implement a context provider component that sets the value and renders children, passing the context.

There's some examples of code components like templ.Once or templ.Flush and you should see how you can make a context setter.

[claritydistro-nick]

That flush example is what I was looking for. I didn't think about overriding the actual render method to abuse context like this. Thanks so much!