When writing MDX, sometimes you want to display more dynamic
content than you otherwise would be able to. An MDX file
that can be templated for different content or to help
<RelatedPosts/> component. Since MDX is "just a
React component" we can leverage the props that get passed
in for this.
Lets say we have some reasonably complex MDX file that uses a variety of components for SEO, displaying images, and linking to other pages. Note: this example MDX content assumes you've built a site with gatsby-mdx, but the props access works for any MDX implementation.
Since we've assumed that this is a Gatsby site, the frontmatter is passed in via the page context as a prop to our MDX component. We can then use the props global to access any prop we want. We could use the frontmatter props to display a new heading using
In context this looks like:
And that's it. You can access any prop from any MDX related library you're using because this is supported in the core functionality. Write your props access like you would normally for any other React component and you can pass in the result of Gatsby page queries from templates, custom props, or anything else you can think of.