#Handling markdown props in MDX files

3 messages · Page 1 of 1 (latest)

slim pawn
#

I'm wondering if it's possible to pass markdown to (specifically React) component properties within an MDX file (processed by astrojs/mdx. I am thinking of the following kind of thing (generated from a CMS so I'm somewhat limited in avoiding this pattern):

Some markdown here...

<Carousel
  images={[/* ... */ ]}
  caption={<>
    Some _markdown_ there...
  </>}
/>

Markdown everywhere!

It seems the markdown in the caption property doesn't get rendered to html / jsx before being passed (probably necessary, I guess it doesn't know what type of component it's being passed to). So it's passed as an object that looks like this:

{
  'astro:jsx': true,
  type: Symbol(astro:fragment),
  props: {
    children: 'Some _markdown_ there...'
  },
  [Symbol(astro:renderer)]: 'astro:jsx'
}

Is there a proper way to handle this (specifically in a React component that it's passed to), or a way to tell the parser (remark plugin?) to generate something else before passing it to the component? Is this something that's supposed to get handled in Astro components (and how?)?

little osprey
slim pawn
#

Nothing there addresses passing markdown as a prop to a component in an MDX page, unless I'm missing something obvious.