wrap-root-element.js

import React from 'react';
import { MDXProvider } from '@mdx-js/tag';
import Code from './src/components/code-mdx';
import { preToCodeBlock } from 'mdx-utils';

// components is its own object outside of render so that the references to
// components are stable
const components = {
    code: preProps => {
        const props = preToCodeBlock(preProps)
        // if there's a codeString and some props, we passed the test
        if (props) {
            return <Code {...props} />
        } else {
            return <Code {...preProps} />
        }
    }
}

const wrapRootElement = ({ element }) => {
    return (
        <MDXProvider components={components} name="mdx-provider">{element}</MDXProvider>
    )
}

export default wrapRootElement;