Use a React Component from NPM in an MDX File with Gatsby MDX
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.
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!
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.
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 />
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!