illustration for Building Websites with MDX and Gatsby
Course

Building Websites with MDX and Gatsby

  3. 3
    Use a React Component from NPM in an MDX File with Gatsby MDX
    46s

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

Chris Biscardi
InstructorChris Biscardi
Share this video with your friends

Social Share Links

Send Tweet

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

View code for this lesson

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.