Use a React Component from NPM in an MDX File with Gatsby MDX

Chris Biscardi
InstructorChris Biscardi

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

MDX allows you to use JSX and React components directly inline in your Markdown. Here's how.

Instructor: [00:00] Here, we have an MDX file in a running Gatsby project. You can see the MDX file rendered in the Chrome pane on the top left of the window. To use a React component in this MDX file, first we'll install a new package.

[00:13] After installing the new package, we'll restart our Gatsby application. The package we installed is called React Color. React Color offers a set of React components that display color pickers from popular design programs.

[00:29] First, we should import a picker from React Color. Then we can use that picker anywhere in our MDX document. Note that we now see a color picker in the middle of our MDX document. Note also that it's interactive and we can actually use it.

Emma Bostian
Emma Bostian
~ 4 years ago

Hey Chris! Really enjoying the course thus far, but it's really hard to see which packages you're installing sometimes since it goes quickly. Would it be possible to add the yarn install <package> commands to the descriptions? That would be really helpful!

Chris Biscardi
Chris Biscardiinstructor
~ 4 years ago

Hey Emma, I'll try to get that done and I'll especially keep the speed in mind for future videos. Thanks for the feedback!

Quang Le
Quang Le
~ 4 years ago

Hi Chris, thank you for the course. I follow your steps and have <SketchPicker /> component on my mdx file, it displays the color picker but it is not interactive. I did run gatsby clear and gatsby develop, but it still didn't work. Do you have any idea? Thanks.

Chris Biscardi
Chris Biscardiinstructor
~ 3 years ago

Something changed in the way SketchPicker and Gatsby's updates interact and it no longer works with that package. Luckily it's only a problem with that specific package, any other one should work, such as this one:

import { HexColorPicker } from "react-colorful"

# Hello

<HexColorPicker />