@rstacruz/gatsby-remark-component
When you use a React component in your markdown, it will insert it as a div instead of a p
Last updated 8 months ago by rstacruz .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @rstacruz/gatsby-remark-component 
SYNC missed versions from official npm registry.



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.

<summary>Technical details...</summary>

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.

Current Tags

  • 2.0.0-pre.2                                ...           beta (8 months ago)
  • 2.0.0                                ...           latest (8 months ago)

7 Versions

  • 2.0.0                                ...           8 months ago
  • 2.0.0-pre.2                                ...           8 months ago
  • 2.0.0-pre.1                                ...           8 months ago
  • 1.2.2-3                                ...           8 months ago
  • 1.2.2-1                                ...           8 months ago
  • 1.2.2-0                                ...           8 months ago
  • 1.2.0-pre.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 86
Last Day 1
Last Week 29
Last Month 255
Dependencies (0)
None
Dev Dependencies (6)

Copyright 2014 - 2017 © taobao.org |