Chooce video playback speed
speed:1

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

InstructorChris Biscardi

Share this video with your friends

Send Tweet

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

This lesson is a Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Instructor: 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.

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.

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.