Build a Custom Provider Component for MDX Deck
MDX Deck is a great library for building slides using Markdown and JSX. Creating a custom Provider component allows you to change the markup of the entire deck. This lets you put things like logos and social media handles in each slide easily.
In this lesson, you'll learn how to create a basic custom Provider that adds a Twitter handle to the bottom right corner of every slide.
Instructor: [00:00] What you see here is that I have several slides in an mdx-deck. We're going to create a custom provider component in order to place markup on every single one of our slides.
[00:09] To do this requires three steps. Step one, we need to create a custom theme, step two, we need to create that custom provider component, and step three, we need to export our theme into the mdx-deck.
[00:22] Let's start by creating our custom theme. In order to get started, we're going to import a theme from mdx-deck theme, so we're going to use the default one. Next, we'll import our provider component even though we haven't created it yet. Finally, we'll export an object that's a combination of the theme provided by mdx-deck in our custom provider.
[00:43] In step two, we're going to create our custom provider. We'll start by importing React, since we'll need it for our JSX. We'll create a simple provider component that just passes the children down to a div. Let's make sure to export our provider.
[01:01] The last step is to export our theme into our mdx-deck.
[01:10] If you are really paying attention, you would have noticed we lost the dots in our slides. These indicators are provided by the default provider component in mdx-deck. We can get these back with the small amount of chicanery.
[01:25] We're going to import the provider component that's in the mdx-deck dist folder. We can start by simply spreading the props into our ThemeProvider. As you can see, we got our dots back.
[01:41] Let's make some changes to how we are handling props, so that we can start at the custom markup we intended to in the first place. I'm going to destructure out the children and use the rest operator to gather all the other props into a new object.
[01:55] I'm going to spread that rest object over the ThemeProvider, and I'm going to pass the children in as a child of ThemeProvider. Above the children, I'm going to put in some content, just to demonstrate that it's going to be on each slide.
[02:11] It works, but you probably need something more useful in your provider component. If you are like me, you might like putting your twitter handle on every slide in your deck, so that people can easily find you on social media.
[02:23] We'll create a div and we'll use the style object in order to position it in the bottom right. You could use style components or CSS. It doesn't really matter. Our position is absolutely, and I'll position it 1em from the bottom and 1em from the right.
[02:39] Next, I'll add a link that points to my twitter profile and add my handle as the text. We save it and we see that it's on every single slide.