@rstacruz/gatsby-remark-component

gatsby-remark-component

Embed components in React inside div wrappers.

A gatsby-transformer-remark plugin that change the AST node parent of a custom component to a div. This is an unofficial maintenance fork of Hebilicious/gatsby-remark-component continued from its v1.1.3.

Install

yarn add gatsby-transformer-remark @rstacruz/gatsby-remark-component

Usage

Read the great custom component article on the official gatsby remark blog here.

This is the base settings, your components inside your markdown will be auto-detected.

//In your gatsby-config.js ...
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["@rstacruz/gatsby-remark-component"]
    }
  }
]

You can explicitly declare the name of the components if you want to be strict.

plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve: "gatsby-remark-component",
          options: { components: ["my-component", "other-component"] }
        }
      ]
    }
  }
]

How it works

When you start Gatsby, your queries will be built from your components, and gatsby-remark-components will update the AST tree.

Technical details...

This will convert this graphql result:

//...
{
  "type": "element",
  "tagName": "p",
  "properties": {},
  "children": [
    {
      "type": "element",
      "tagName": "my-component",
      "properties": {},
      "children": []
    }
  ]
}

To this:

//...
//Notice the tag name
{
  "type": "element",
  "tagName": "div",
  "properties": {},
  "children": [
    {
      "type": "element",
      "tagName": "my-component",
      "properties": {},
      "children": []
    }
  ]
}

Now in your markdown template you can do:

import rehypeReact from "rehype-react"
import { MyComponent } from "../pages/my-component"

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: { "my-component": MyComponent }
}).Compiler

Replace :

<div dangerouslySetInnerHTML={{ __html: post.html }} />

by:

<div>{renderAst(post.htmlAst)}</div>

And in your page query ... :

//...
markdownRemark(fields: { slug: { eq: $slug } }) {
 htmlAst // previously `html`

 //other fields...
}
//...

Now in your markdown you can do:

# Some Title

Some text

<my-component></my-component>

This will render your component without any validateDOMNesting warning.