Global Scope

When importing a react component into your MDX, you can import it using the import statement as in JavaScript.

import { SketchPicker } from "react-color";
# Hello, world!
Here's a color picker!
<SketchPicker />

If you want to allow usage of a component from anywhere, add it to the globalScope field in the options inside gatsby-config.js:

{
resolve: `gatsby-mdx`,
options: {
globalScope: `
import { SketchPicker } from "react-color";
export default { SketchPicker };
`
}
}

All that is needed is to import the components you wish to be globally available and then put them into an exported object.

Then in any MDX file, you can insert the components without the import.

# Hello, world!
Here's a color picker
<SketchPicker />

(Note: globalScope is not working yet in any mdx file in src/pages, but there is an issue to resolve this: ChristopherBiscardi/gatsby-mdx#239)

edit this page on GitHub