3

Similarly to how you can pass Markdown components to Astro components, I want to import one into a React/Preact component.

It didn't seem to be working directly when I imported the component into the React/Preact, so I tried passing them in from the parent Astro component like so:

 <DemoContent
  blog={(<Blog />)}
  tweet={(<TweetThread />)}
  highlight={(<HighlightClips />)}
  client:visible
/>

...but that gives me ERROR: Expected ">" but found "/".

What is the suggested way of doing this?

Cassidy
  • 3,328
  • 5
  • 39
  • 76

1 Answers1

2

(Follow-up from a discord conversation. Thanks for making this public!)

When passing Astro or Markdown components to a framework like Preact, you'll need to use "slots." You can use slot="prop-name" to wire those up like so:

<DemoContent>
  <Blog slot="blog" />
  <TweetThread slot="tweet" />
  <HighlightClips slot="highlight" />
</DemoContent>

Then, in your Preact component, you can access blog, tweet, and highlight as props. You'll render these similar to the {children} prop:

export function DemoContent({ blog, tweet, highlight }) {
  return (
    <section>
      {blog}
      {tweet}
      {highlight}
    </section>
   )
}

These will also map to Vue or Svelte slots if you happen to use those frameworks. Hope this helps!

Ben Holmes
  • 36
  • 1
  • 1
    Thank you! This is exactly what I was looking for! Sharing the docs here now that I know what to look for: https://docs.astro.build/en/core-concepts/astro-components/#slots – Cassidy Oct 26 '22 at 21:19