How to slot content inside template : Nunjucks

[chadams]

Given the template

  <div class="container flex flex-wrap items-center justify-between p-4 mx-auto sm:p-6 ">
          {{comp.Button({text:"example1"})}}
          {{comp.Button({text:"example2"})}}
  </div>

What I really want is to slot content into a reusable component, like React

  <Container>
          {{comp.Button({text:"example1"})}}
          {{comp.Button({text:"example2"})}}
  </Container>

My initial thought is to pass in like this...

{{comp.Container({content:[
    comp.Button({text:"example1"}), 
    comp.Button({text:"example1"})
]})}}

but is starting to look messy, is there a way to put JSX components inside NJK? or somehow pass NJK blocks to a NJK component?

[oscarotero]

You can use lume components as react components. For example:

export default function Container({ comp })  {
    return <>
        <comp.Button text="example1" />
        <comp.Button text="example2" />
    </>
}

And then this component can be used in other jsx component or nunjucks:

<div>
    {{ comp.Container() }}
</div>

The comp argument is always available not only in the layouts but also the components.

FYI, I'm planning to implement the following syntax for components in nunjucks:

{% comp Container %}
    {{comp.Button({text:"example1"})}}
    {{comp.Button({text:"example2"})}}
{% endcomp %}

So this ease the use of nested components. But it's not implemented yet.