How would you pass a Markdown component to a React or Preact component in Astro?

Question

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?

Ben Holmes · Accepted Answer · 2022-10-26 21:16:17Z

3

(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!

answered Oct 26, 2022 at 21:16

Ben Holmes

461 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Cassidy Over a year ago

Thank you! This is exactly what I was looking for! Sharing the docs here now that I know what to look for: docs.astro.build/en/core-concepts/astro-components/#slots

Collectives™ on Stack Overflow

How would you pass a Markdown component to a React or Preact component in Astro?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related