How to pass in a view to a prop other than children

[nmattela]

Hi,

In React, you can make the following component:

function MyComponent({ header, children, footer }: { header?: ReactNode, children: ReactNode, footer?: ReactNode }) {
  return (
    <div>
      <div>{header}<div>
      <p>{children}</p>
      <div>{footer}</div>
    </div>
  )
}

Then use it as follows:

<MyComponent
  header={<h1>This is the header</h1>}
  footer={<p>This is the footer</p>}
>
  This is the child
</MyComponent>

My question is: how can I do the same in Leptos? I know how to pass in the child, but I cannot figure out how to pass props that are views through props other than children. Is it possible? For context; I am a noob.

Thanks for letting me know!

[gbj]

We tend to do this through what are sometimes called "render props" in React: a prop that is a function that returns some kind of view.

An example of this would be the Show component in the core library, which takes a fallback like fallback=|| view! { <Small/> }.

If you want to do something similarly in your own component, the easiest way to do this is to take a prop whose type is ViewFn. Here's how Show does it.

[nmattela]

Thanks, that was precisely what I was looking for! You're the best!