html-react-parser使い方

html-react-parserは何をしてくれる？

「文字列のHTML」→「Reactで描画できる要素（JSX構造）」にしてくれるライブラリです

const sample = parse("<p>Hello <b>world</b></p>")

↓
Hello world

https://www.npmjs.com/package/html-react-parser

一般的な具体例は

サーバーやCMSから取得したHTMLをそのままReactで表示したいとき
例：WordPressやHeadless CMSから受け取った記事本文をReactアプリ内に埋め込みたい場合。

dangerouslySetInnerHTMLを避けて安全にHTMLを扱いたいとき
→ html-react-parser はタグや属性をフィルタリングでき、XSS対策をしやすい。

parse()関数の第2引数にオプションを設定できます

replace

特定のHTML要素を別のReactコンポーネントに置き換えるときに使います

例

import parse from "html-react-parser";

const html = '<img src="test.jpg" alt="test">';
const content = parse(html, {
  replace: (domNode) => {
    if (domNode.name === "img") {
      return <MyCustomImage {...domNode.attribs} />;
    }
  },
});

補助関数のdomToReact()は何してる？

parse() は全体を自動でReact化しますが、
replace() で加工する場合はdomToReact()で部分的にReact化します。

理由はreplace() を使うと「置き換え対象の中身」は自動でReact化されなくなるからです。

（補足）parse() は内部で次の2段階を自動で行っています

1. HTML文字列 → DOMノード構造にパース
2. DOMノード構造 → React要素（JSX相当）に変換

Element

HTMLを構成する1つの要素（タグ）を表すオブジェクト