[MDX] Build a Custom Provider Component for MDX Deck

MDX Deck is a great library for building slides using Markdown and JSX. Creating a custom Providercomponent 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.

 

1. Create a Provider.js:

import React from 'react'
import ThemeProvider from 'mdx-deck/dist/Provider'

const Provider = ({ children, ...rest }) => (
  <ThemeProvider {...rest}>
    {children}

    <div
      style={{
        position: 'absolute',
        bottom: '1em',
        right: '1em'
      }}
    >
      <a href="https://twitter.com/Zhentiw">
        @Zhentiw
      </a>
    </div>
  </ThemeProvider>
)

export default Provider

 

2. Create a theme.js:

import theme from 'mdx-deck/themes'
import Provider from './Provider'

export default {
  ...theme,
  Provider
}

 

3. Use it:

export { default as theme } from './theme.js'

# Step 1: Create a Custom Theme

---

# Step 2: Create a Custom Provider

---

# Step 3: Export Our Theme in the mdx-deck