Components

Gatsby usage

Google Docs content will be transformed to markdown by gatsby-source-google-docs.

For using Components inside Markdown, you will need to use MDX.

gatsby-plugin-mdx is the official integration for using MDX with Gatsby.

Install

First you should uninstall gatsby-transformer-remark because you will not use it anymore.

yarn remove gatsby-transformer-remark

Then you need to install the gatsby-plugin-mdx plugin with its dependencies.

yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

Configuration

Add the plugin to your gatsby-config.js.

module.exports = {
    plugins: [
        "gatsby-source-google-docs"
        {
            resolve: "gatsby-plugin-mdx",
            options: {
                gatsbyRemarkPlugins: [
                    // You need some transformations?
                    // Checkout https://www.gatsbyjs.com/plugins/?=gatsby-remark
                    // And pick-up some plugins
                ],
            },
        },
    ],
}

You can add plugins to add functionalities. Checkout the official documentation for more info.

Define components

You need to allow usage of some React Components from Google Docs content using MDXProvider.

import { MDXProvider } from "@mdx-js/react"
import * as DesignSystem from "your-design-system"

export default function Layout({ children }) {
 return (
   <MDXProvider
     components={{
       // Map HTML element tag to React component
       h1: DesignSystem.H1,
       h2: DesignSystem.H2,
       h3: DesignSystem.H3,
       // Define components
       MyButton: props => <button {...props} style={{ color: "green" }} />,
     }}
   >
     {children}
   </MDXProvider>
 )
}

Google Docs usage

Once you defined which components are available in Google Docs, you just need to use them.

The following markup:

<GatsbyLogo />

Will render: