gatsby-remark-component-parent2div

This is a plugin for gatsby-transformer-remark. You may need this plugin if you are seeing a validateDOMNesting warning in console. This warning may come up if you are embedding custom React Components inside your Markdown files. If your Component has any div elements, then you end up nesting <div> inside <p>, which is against HTML specification. Modern browsers will take a guess at what you want and render something (usually reasonable), but it's not guaranteed, so you should fix the warning. You can fix this in 2 ways: either you change your component so that it doesn't have a <div> or you can use this plugin to change the AST node parent of your custom component from <p> to <div>.

Install

You can install with npm or yarn.

yarn add gatsby-transformer-remark gatsby-remark-component-parent2div
npm i gatsby-remark-component-parent2div

Release Notes

v 1.2

• Fixed bug where Component is not detected when passing props (and auto-detection is off).
• Fixed tests.
• Improved time complexity from O(nch) to O(n), where n=nodesInMarkdown, c=componentsSpecifiedInOptions, h=htmlTagsSpecifiedInCode
• Added a verbose option for console logs.

v 1.1

• New configuration options!
• Can now auto-detect your custom components.

How to use

Minimal configuration, auto-detect custom components:

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

Disable auto-detection (if you want only some custom components' parents changed, but not others).

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

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

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.

Attribution

Hi, I'm Baobab. This project was created by Hebilicious. It was not maintained anymore, so I decided to fork it. You are now looking at the fork. The original is here.

Authors:

• Hebilicious
• Baobab Koodaa
• Designbyadrian
• rstacruz