Markdownを強力に変換するNodeJSライブラリーremarkを使ってみた2

これは　yuriacats アドベントカレンダー4日目の記事です

---

実装編２

（参考リポジトリ:https://github.com/yuriacats/remark-howto/pull/new/1204Remark　）
前回まででHTML要素をテキストとして返せる部分まで作れているので、次はそれをReactのDOMとして返すような形にしたい。
前回はText型を返していたが、今回はReact.Element型を返したいので、rehype-reactというライブラリーをrehypeStringifyの代わりに使えば良いということがわかる。
よって、rehype-stringifyを利用していた部分にrehype-reactを導入し、OptionとしてReactのcreateElement関数を渡してやれば良い。

import React, { useEffect, useState, Fragment, createElement } from "react";
import { unified } from "unified";
import remarkParse from "remark-parse/lib";
import remarkRehype from "remark-rehype";
import rehypeReact from "rehype-react/lib";


function App() {
    const [testText, setTestText] = useState("")
    const [resultText, setResultText] = useState(Fragment)
    useEffect(() => {
        unified()
            .use(remarkParse)
            .use(remarkRehype)
            .use(rehypeReact, { createElement })
            .process(testText)
            .then((res) => {
                console.log(res)
                setResultText(res.result)
            })

    }, [testText])
    return (
        <div>
            <p>Markdownを入力すると下にHTML変換したものを表示するよ！</p>
            <textarea
                rows={10}
                onChange={(event) => setTestText(event.target.value)}
            />
            <p>
                {resultText}
            </p>
        </div>
    );
}

export default App;

すると以下のようにMarkdownを打った側からHTMLに変換してプレビュー画面を作ることができる。

---

参考文献：
https://qiita.com/masato_makino/items/ef35e6687a71ded7b35a
https://zenn.dev/januswel/articles/e4f979b875298e372070