menu
Channels
Team

React Component: Markdown as a Prop

May 6, 2020 at 3:46am

React Component: Markdown as a Prop

May 6, 2020 at 3:46am
I'm new to MDX so I hope this isn't a silly question.

What I want to do

I'd like to create a component like this:
<Note text={`My cool markdown string that supports markdown so I can do this [link](https://google.com)`}
And the rendered output would be like this:
Screen Shot 2020-05-05 at 8.39.34 PM.png
And I would use it inside an .mdx file like so:
My cool blog post.
<Note text={`Markdown oh **yeah**!! [Cool, right?](https://www.youtube.com/watch?v=dQw4w9WgXcQ)`}
More text...
I'd imagine I could write the component, make text take markdown as a prop, but then I'd need to parse the markdown and output HTML within the <Note /> component.
Is this possible? How would one achieve this? I wasn't sure if this was something mdx-js could do, if I needed to do it with unified-js or something else. Any suggestions/links are appreciated! 🙏🏼

May 6, 2020 at 6:37am
This is not something MDX can do. And I don’t really think it should, because it’s not really clear if the text should be interpreted as JSX, Markdown, or a normal string. Between those braces, you can write any JavaScript, so what would happen if people used text={(function() {`markdown, text, or JSX?`})()}, or other weird constructs?
I would suggest using JSX if you want structured content: <Note text={<>JSX oh <strong>yeah</strong>!!</>}, or, use content:
<Note>Markdown oh **yeah**!! [Cool, right?](https://www.youtube.com/watch?v=dQw4w9WgXcQ)</Note>
This works in MDX 2, for MDX 1 you’d need blank lines between the tags and content:
<Note>
Markdown oh **yeah**!! [Cool, right?](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
</Note>
Edited
like-fill
2
  • reply
  • like

May 7, 2020 at 3:12am
This is not something MDX can do. And I don’t really think it should, because it’s not really clear if the text should be interpreted as JSX, Markdown, or a normal string. Between those braces, you can write any JavaScript, so what would happen if people used text={(function() {`markdown, text, or JSX?`})()}, or other weird constructs?
I would suggest using JSX if you want structured content: <Note text={<>JSX oh <strong>yeah</strong>!!</>}, or, use content:
<Note>Markdown oh **yeah**!! [Cool, right?](https://www.youtube.com/watch?v=dQw4w9WgXcQ)</Note>
This works in MDX 2, for MDX 1 you’d need blank lines between the tags and content:
<Note>
Markdown oh **yeah**!! [Cool, right?](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
</Note>
Woah! I didn't know you could use content and do that (looks like I have to use MDX 1 on my Gatsby site).
  • reply
  • like
  • reply
  • like
I hit send too early...but I was able to use this to achieve what I wanted! Thanks a ton !
like-fill
1
  • reply
  • like
If this isn't already in the docs, I'd be happy to add it!
Either way, planning to write up a blog post to share this with others.
  • reply
  • like

May 7, 2020 at 2:03pm
PRs to the docs are welcome! I think we do in fact have some examples of this? 🤔 Anyway, you probably have a good idea of where you expected it, so that would be the right place to add it probably!
like-fill
1
  • reply
  • like

May 8, 2020 at 3:37am
I wrote a blog post about this in case anyone is interested.
Also, opened a PR to update the docs: https://github.com/mdx-js/mdx/pull/1060
like-fill
1
  • reply
  • like