Skip to content
Gatsby-transformer-remark plugin for custom components.
JavaScript
Branch: master
Clone or download
Latest commit 39a3c69 Apr 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Update prettier config to match Heblicious's conventions Apr 6, 2019
.gitignore Add yarn.lock file Apr 6, 2019
.prettierrc Update prettier config to match Heblicious's conventions Apr 6, 2019
.travis.yml Update prettier config to match Heblicious's conventions Apr 6, 2019
CHANGELOG.md Update CHANGELOG Apr 6, 2019
CONTRIBUTING.md Add CONTRIBUTING.md developer notes Apr 6, 2019
LICENSE Updating Readme & License Feb 5, 2018
README.md Update README.md Apr 24, 2019
babel.config.js Update prettier config to match Heblicious's conventions Apr 6, 2019
package.json Update package.json Apr 24, 2019
rollup.config.js Update prettier config to match Heblicious's conventions Apr 6, 2019
yarn.lock

README.md

Disclaimer : I haven't been maintaining this package. Look into forks like @rstacruz/gatsby-remark-component. PR welcome !


Gatsby Remark Component Build Status npm version

A gatsby-transformer-remark plugin that change the AST node parent of a custom component to a div.

Install

yarn add gatsby-transformer-remark gatsby-remark-component

Release Notes

v 1.1

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

How to use

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: ["gatsby-remark-component"]
    }
  }
]

You can explicitly declare the name of the components if you want to be strict. (it will disable the auto-detection )

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

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.

You can’t perform that action at this time.