Gatsby Remark Component
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:
//...
To this:
//...//Notice the tag name
Now in your markdown template you can do:
import rehypeReact from "rehype-react"import MyComponent from "../pages/my-component" const renderAst = createElement: ReactcreateElement components: "my-component": MyComponent Compiler
Replace :
<div = />
by:
<div></div>
And in your page query ... :
//... { 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.