![Mdx Mdx](/uploads/1/1/8/6/118682823/515967061.png)
Old and busted: rehype-react
♠️ React MDX-based presentation decks. Contribute to jxnblk/mdx-deck development by creating an account on GitHub. MDX is a killer feature for things like blogs, slide decks and component documentation. It allows you to write Markdown without worrying about HTML elements, their formatting and placement while sprinkling in the magic of custom React components when necessary.
Mdx React Documentation
MDX is a standard file format that combines Markdown with JSX. This means you can use Markdown’s terse syntax (such as # heading) for your documentation, and freely embed JSX component blocks at any point in the file.
In addition to being widely supported, it has a much better mental model than my previous approach to React in Markdown, which used rehype-react and had some ugly caveats.
React Mdx Deck
For one, I couldn’t figure out a good way to include only a certain subset of components in a certain blog post. (I made a note to myself to try and figure this out but I never did.) Every single component (even the heavy ones that include libraries like Three.js) gets included every single blog post, regardless of whether not they are all needed. Not ideal.
This approach also requires that you pass all props to your embedded components as strings. The components I need for this blog are all fairly simple so this never was a huge issue, but if I wanted to do anything more complex this would quickly become a deal-breaker.
React Mdx Blog
All this to say, React in Markdown is here to stay.
rehype-react
, not so much (at least for me). I’d been following MDX
for some time, as well as gatsby-mdx, which makes it easy to consume MDX
from a Gatsby
blog. I finally had some time after wrapping up a few projects (1, 2) and decided to bite the bullet and give gatsby-mdx
a try. A few weeks later, I’m back up and running (this page is MDX!) and on the whole, a total convert! Here are a few things I learned along the way.