Writing a Custom Note Component for MDX

Back when I was looking for inspiration while building my personal website and blog, I stumbled upon Tania Rascia’s site.

One of my favorite parts were her “custom blocks” - colorful components used to annoate or add helpful information to her articles. I made a note to create some for mine when I had the time.

Now that I’ve found the time, I’ve learned there are multiple ways to do it. In this post, I’ll explain a couple of ways to write a custom <Note /> component for MDX.

JSX

We can go the JSX route and do it straight up.

Code:

<Note>
  <p>hello</p>
</Note>

Rendered:

hello

This works and it’s intuitive, but it feels like a lot of work! I’d rather write Markdown and let MDX handle the rest for me.

Content

I learned(thanks to @woorm for pointing this out on the MDX Spectrum community) that I can use my component as a “JSX Wrapper”. This means I can wrap my Markdown content within my <Note />.

Code:

<Note>
  **Note:** You _might_ want to check this out! [Link](https://freecodecamp.org/)
</Note>

Rendered:

Note: You might want to check this out! Link

I like this approach more because it allows me to a) write markdown and b) put it in a styled container. I let MDX handle the hard stuff for me!