GatsbyJSでMrakdown内でコンポーネントを使う

GatsbyJSでMrakdown内でコンポーネントを使う

Markdown内でReactコンポーネントを使いたい欲求が出てきたので実装してみる。

Gatsby Remark Componentを使う

こういうReactコンポーネントを使う場合は、Gatsby Remark Componentを使う。

gatsby-remark-responsive-iframeをインストール

npm install --save gatsby-remark-component
npm install --save rehype-react

gatsby-config.jsmの設定

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

実際の動作確認

とりあえず簡単なコンポーネントを作ってみる。
/components/Sample.js

import React from 'react'

const Sample = () => (

<div>
    <p>これはコンポーネントです。</p>
</div>

)
export default Sample

blog-post.jsを変更する。
読み込みを追加

import rehypeReact from "rehype-react"
import Sample from "../components/SampleSample"

そして、コンポーネントを使えるように設定する。注意点としては小文字にしなければいけない。

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: { "sample": Sample },
}).Compiler

<div dangerouslySetInnerHTML={{ __html: post.html }} />

を

{
  renderAst(post.htmlAst)
}

に変更する。
あとGraphQLクエリのHTMLをhtmlastに変更する。

# ...
markdownRemark(fields: { slug: { eq: $slug } }) {
  htmlAst
}
# ...

そしてマークダウンファイル内に

<sample></sample>

と書く。

<sample />

書きたいがこれでは動かない。注意。

出来た！
お疲れ様でした。

ハマったところ

公式がimport {Sample} form ../という書き方していたのでそこでハマった。