remarkablemark/html-react-parser

これは何？

主な機能

• 01HTML文字列を、コンポーネント内でそのままレンダリングできるReact要素に変換します。
• 02サーバーサイドレンダリング用のNode.jsとブラウザーの両方で動作します。
• 03replaceオプションを使って、条件に一致するDOMノードを独自のReact要素に置き換えられます。
• 04transformオプションを使って、変換後の各要素を変更できます。
• 05libraryオプションを使って、Preactや独自のUIライブラリを利用できます。
• 06空白やパースの動作を制御するtrimオプションとhtmlparser2の設定に対応しています。

ユースケース

• CMSやMarkdownパイプラインから取得したHTMLコンテンツをReactアプリ内でレンダリングする。
• レンダリング時に、リンクや画像などの埋め込みタグをReactコンポーネントに置き換える。
• Node.jsのReactアプリケーションでHTMLフラグメントをサーバーサイドレンダリングする。

クイックスタート

1. 1

   npmでインストール

   npm install html-react-parser --save
2. 2

   HTML文字列をインポートして解析

使う前に知っておきたいこと

• !XSS対策はされていません。READMEにはHTMLをサニタイズしないと記載されています。
• !不正なHTMLはサニタイズされません。
• !htmlparser2のオプションはサーバー（Node.js）でのみ動作し、ブラウザーでは動作しません。

トピック

よくある質問

html-react-parser とは？

HTML文字列をReact要素に変換するパーサー。Node.jsとブラウザーの両方で動作します。 html-react-parserはHTML文字列を1つ以上のReact要素に変換するため、CMS、データベース、APIから取得したマークアップを、dangerouslySetInnerHTMLを使わずにReactコンポーネント内でレンダリングできます。サーバー（Node.js）とクライアント（ブラウザー）の両方で動作し、CDNからUMDバンドルとして読み込むこともできます。

html-react-parser は無料で使えますか？ライセンスは？

html-react-parser は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

html-react-parser は今もメンテナンスされていますか？

活発にメンテナンス中。html-react-parser の最終コミットは 2026年11月6日 です。

html-react-parser は何に使えますか？

CMSやMarkdownパイプラインから取得したHTMLコンテンツをReactアプリ内でレンダリングする。 レンダリング時に、リンクや画像などの埋め込みタグをReactコンポーネントに置き換える。 Node.jsのReactアプリケーションでHTMLフラグメントをサーバーサイドレンダリングする。

html-react-parser のインストール方法は？

npmでインストール: npm install html-react-parser --save HTML文字列をインポートして解析

html-react-parser はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/remarkablemark/html-react-parser