Nickel Palladium Manganese

    gatsby-remark-component

    1.1.3 • Public • Published

    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.

    Install

    npm i gatsby-remark-component

    DownloadsWeekly Downloads

    982

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    18.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • hebilicious