Creation:2026-01-20Last update:2026-03-24

    HTMLコンテンツ / IntlayerのHTML

    Intlayer は HTML コンテンツをサポートしており、辞書内にリッチで構造化されたコンテンツを埋め込むことができます。このコンテンツは標準の HTML タグでレンダリングすることも、実行時にカスタムコンポーネントに置き換えることもできます。

    HTML コンテンツの宣言

    HTML コンテンツは html 関数を使って宣言するか、単に文字列として定義できます。

    html 関数を使用して明示的に HTML コンテンツを宣言します。これにより、自動検出が無効になっている場合でも標準タグが正しくマッピングされることが保証されます。

    htmlDictionary.content.ts
    import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // 設定ファイルで設定可能  content: {    myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

    html() ノード

    html() 関数は、Intlayer v8 の新機能で、辞書内で HTML コンテンツを明示的に定義できるようにします。Intlayer は多くの場合、HTML コンテンツを自動検出できますが、html() 関数を使用するといくつかの利点があります：

    • 型安全性: html() 関数を使用すると、カスタムコンポーネントに期待されるプロパティを定義でき、エディタでの補完や型チェックが向上します。
    • 明示的な宣言: 自動検出をトリガーする標準的な HTML タグが含まれていない場合でも、文字列が常に HTML として処理されるようにします。
    • カスタムコンポーネントの定義: html() の第 2 引数に、カスタムコンポーネントとその期待されるプロパティ型を定義して渡すことができます。
    typescript
    import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='こんにちは'>世界</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });

    HTML ノードで .use() メソッドを使用する場合、提供されたコンポーネントは html() 関数で提供された定義（利用可能な場合）と照らし合わせてチェックされます。

    HTML のレンダリング

    レンダリングは Intlayer のコンテンツシステムで自動的に処理することも、専用のツールを使って手動で処理することもできます。

    自動レンダリング（useIntlayer を使用）

    useIntlayer 経由でコンテンツにアクセスすると、HTML ノードは既にレンダリング可能な状態になっています。

    HTML ノードはそのまま JSX としてレンダリングできます。標準的なタグは自動で動作します。

    App.tsx
    import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

    カスタムコンポーネントを提供したりタグを上書きしたりするには .use() メソッドを使用します:

    tsx
    {myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

    HTMLProviderによるグローバル設定

    アプリ全体でHTMLレンダリングをグローバルに設定できます。これは、すべてのHTMLコンテンツで利用可能にしたいカスタムコンポーネントを定義するのに最適です。

    AppProvider.tsx
    import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,      CustomLink: ({ children }) => <a href="/details">{children}</a>,    }}  >    {children}  </HTMLProvider>);

    独自の HTML レンダラーを使用することもできます:

    AppProvider.tsx
    import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('react-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);
    HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。

    手動レンダリングと高度なツール

    生のHTML文字列をレンダリングしたり、コンポーネントのマッピングをより細かく制御したい場合は、次のツールを使用してください。

    <HTMLRenderer /> コンポーネント

    tsx
    import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>

    useHTMLRenderer() フック

    事前設定されたレンダラー関数を取得します。

    tsx
    import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Hello <strong>World</strong></p>");

    renderHTML() ユーティリティ

    コンポーネント外でのレンダリングのためのスタンドアロンユーティリティ。

    tsx
    import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

    オプションリファレンス

    これらのオプションは HTMLProvider、HTMLRenderer、useHTMLRenderer、および renderHTML に渡すことができます。

    オプション 型 デフォルト 説明
    components Record<string, any> {} HTMLタグまたはカスタムコンポーネント名をコンポーネントにマッピングするオブジェクト。
    renderHTML Function null デフォルトのHTMLパーサを完全に置き換えるカスタムレンダリング関数（Vue/Svelteプロバイダーのみ）。
    注: ReactおよびPreactでは、標準のHTMLタグが自動的に提供されます。これらを上書きしたりカスタムコンポーネントを追加したい場合にのみ、componentsプロップを渡してください。
    Markdown
    関数取得