Passing Markdown parts to React or Preact in Astro

I’m utilizing Astro and Preact (which has the identical API as React) for a undertaking. I ran right into a subject not too long ago the place I wished to cross a Markdown part to the Preact facet of the undertaking, and it wasn’t working the best way I anticipated.

To start with, I attempted importing it into my Preact file on the high:

// Preact Element
import Weblog from './Weblog.md'

perform PreactComponent() {
    return (
        <div>
            <Weblog />
        </div>
    )
}

However sadly, that did not work! Doing that sort of import is just doable in .astro parts, despite the fact that Astro has help for Preact and React (amongst different issues) out of the field.

I spotted (after truly studying the documentation, stunning) that you may’t cross Markdown on to non-Astro parts.

So, I assumed it is perhaps helpful to import the Markdown right into a dad or mum Astro part, after which cross that into my Preact part from there.

// Mother or father Astro Element
---
import Weblog from './Weblog.md';
---

<PreactComponent
  weblog={(<Weblog />)}
  consumer:seen
/>

This was shut, however no cigar. Seems, you’ll be able to’t cross JSX as props to framework parts.

Coming into… slots!

I realized about Named Slots in Astro and that modified the sport! This can be a idea that’s fairly widespread within the Vue and Svelte communities, however I admit as a React individual I hadn’t actually tried them earlier than.

So, what I needed to do was outline a slot in my Astro dad or mum part:

// Mother or father Astro Element
---
import Weblog from './Weblog.md';
---

<PreactComponent>
    <Weblog slot="weblog" />
</DemoContent>

…after which from there, deal with the weblog slot as a prop on the Preact facet!

// Preact Element

perform PreactComponent({ weblog }) {
    return (
        <div>
            {weblog}
        </div>
    )
}

And voilà, I now can render Markdown in a React/Preact part in Astro.

That is significantly helpful for me as a result of I’ve some non-technical people giving me Markdown recordsdata to share on an internet site (with some state-driven logic figuring out what copy ought to be proven when). Now that I will cross within the Markdown this manner, I can have a separate Markdown file folder for them to work with, with out messing with the logic of the web site. Woo hoo!

Particular due to Ben Holmes for serving to me out with this, in addition to Alex and Charlie! Ben made an superior little demo on StackBlitz as an example the problem, and here is a associated Stack Overflow query as properly when you discover this beneficial and need to upvote!