🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
11 : 17 : 36 : 20
1×
Become a member
to unlock all features
Autoplay

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

    Chris BiscardiChris Biscardi
    reactReact
    gatsbyGatsby

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.