gatsby-remark-component
v1.1.3
Published
When you use a React component in your markdown, it will insert it as a div instead of a p
Downloads
4,840
Maintainers
Readme
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:
//...
{
"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.