Course

Building Websites with MDX and Gatsby

1
Introduction to MDX
46s
2
Install MDX in a New Gatsby Project
1m 13s
3
Use a React Component from NPM in an MDX File with Gatsby MDX
46s
4
Use MDXProvider to Control the Rendering of Markdown Elements with Gatsby MDX
1m 44s
5
Replace the MDX Content Wrapper with an MDXProvider in Gatsby MDX
52s
6
Create a Live Code Component with Gatsby MDX and React Live
2m 31s
7
Syntax Highlighting Code Blocks using Components with Prism React Renderer and Gatsby MDX
2m 18s
8
Compose Syntax Highlighting and Live Code Examples using MDXProvider with Gatsby MDX
1m 41s
9
Processing Markdown File Extensions with Gatsby MDX
54s
10
Access Props inside MDX within a Gatsby Application
38s

Access Props inside MDX within a Gatsby Application

InstructorChris Biscardi

Share this video with your friends

Send Tweet

Published 6 years ago

Updated 4 years ago

In this lesson, you will learn how to access props from inside MDX files. This can be useful for rendering dynamic content or passing more complex data through to React components inside of your MDX files.

View code for this lesson

Instructor: [00:00] Here, we have MDX file with some classic front matter, a couple of imports, some Markdown content, and some JSX. On the right, because our Markdown file is in a Gatsby project, we have our Gatsby site. To access props, we need to use the props global.

[00:20] If we look at the object that got logged out, we see that the prop that we want is in pageContext.frontMatter.intro. Back in our MDX file, we will access props.pageContext.frontMatter.intro, and now, our intro shows up.

Building Websites with MDX and Gatsby

Access Props inside MDX within a Gatsby Application

Social Share Links