MDXProvider and MDXRenderer

[JSinkler713]

Hey was having a time of it finding anyone using MDXRenderer and MDXProvider. Thought you could pass through components in MDXRenderer like you can in MDXProvider, but that's not the case. You can see them show up in the devTools but they are not usable.

So solution is just to wrap the MDXRenderer in the MDXProvider, since as they say in the docs, all children will now have access to the components, including the one that is about to be created with MDXRenderer. Short Ex:

import React from "react"
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { MDXProvider } from "@mdx-js/react"
import { Chart, Pullquote, Message } from "./ui"

const shortcodes = { Chart, Pullquote, Message }

export default ({ children }) => (
  <MDXProvider components={shortcodes}>
    <MDXRenderer>{children}</MDXRenderer>
  </MDXProvider>
)

Hope someone finds this useful 👋

[WeZZard]

My life saver!