著者:
    Aymeric PINEAU
    作成:2026-01-21最終更新:2026-01-21

    react-intlayer パッケージ

    react-intlayer パッケージは、Intlayer を React アプリケーションに統合するために必要なツールを提供します。多言語コンテンツを扱うためのコンテキストプロバイダー、フック、およびコンポーネントを含みます。

    インストール

    bash
    npm install react-intlayer

    エクスポート

    プロバイダー

    インポート:

    tsx
    import "react-intlayer";
    コンポーネント説明関連ドキュメント
    IntlayerProviderアプリケーションをラップし Intlayer コンテキストを提供するメインプロバイダー。デフォルトでエディターサポートを含みます。IntlayerProvider
    IntlayerProviderContentエディター機能を含まない、コンテンツに特化したプロバイダーコンポーネント。ビジュアルエディターが不要な場合に使用してください。-
    HTMLProviderHTML関連の国際化設定のプロバイダー。HTMLタグのコンポーネントをオーバーライドできます。-

    フック

    インポート:

    tsx
    import "react-intlayer";
    フック説明関連ドキュメント
    useIntlayerクライアントサイドのフックで、キーで辞書を選択してその内容を返します。指定がなければコンテキストのロケールを使用します。useIntlayer
    useDictionary辞書オブジェクトを変換し、現在のロケール向けのコンテンツを返すフック。t() の翻訳、列挙型（enums）などを処理します。useDictionary
    useDictionaryAsync非同期の辞書を扱うフック。Promise ベースの辞書マップを受け取り、現在のロケール向けに解決します。-
    useDictionaryDynamicキーでロードされる動的な辞書を扱うフック。内部で React Suspense を使用してロード状態を処理します。-
    useLocale現在のロケール、デフォルトロケール、利用可能なロケール、およびロケールを更新する機能を取得するためのクライアントサイドフック。useLocale
    useLocaleBaseコンテキストから現在のロケールと関連するすべてのフィールド（locale、defaultLocale、availableLocales、setLocale）を取得するためのフック。-
    usePathnameロケールセグメントが削除された現在のパス名を返すフック。popstateを介したブラウザナビゲーションに反応します。usePathname
    useRewriteURLURLの書き換えを管理するためのクライアントサイドフック。現在のパス名とロケールの書き換えルールが存在する場合、URLを更新します。useRewriteURL
    useI18nフック。キーでネストされたコンテンツにアクセスするための翻訳関数 t() を提供します。i18next/next-intl のパターンを模倣しています。useI18n
    useIntlフック。ロケールに結びついた Intl オブジェクトを提供します。現在のロケールを自動で注入し、最適化されたキャッシュを使用します。-
    useLocaleStorageローカルストレージまたはクッキーで locale の永続化を提供するフック。getter と setter 関数を返します。-
    useLocaleCookie非推奨。代わりに useLocaleStorage を使用してください。クッキーで locale の永続化を管理するフック。-
    useLoadDynamicReact Suspenseを使用して動的辞書を読み込むためのフック。キーとPromiseを受け取り、結果をキャッシュします。-
    useIntlayerContext現在の Intlayer クライアントのコンテキスト値（locale、setLocale など）を提供するフック。-
    useHTMLContextHTMLProvider コンテキストから HTML コンポーネントのオーバーライドにアクセスするフック。-

    関数

    インポート:

    tsx
    import "react-intlayer";
    関数説明関連ドキュメント
    tクライアントサイドの翻訳関数。与えられた多言語コンテンツの翻訳を返します。ロケールが指定されていない場合はコンテキストのロケールを使用します。翻訳
    getDictionary辞書オブジェクトを処理し、指定したロケールのコンテンツを返します。t() 翻訳、列挙型、markdown、HTML などを処理します。-
    getIntlayer生成された宣言からキーで辞書を取得し、指定したロケールのコンテンツを返します。getDictionary の最適化バージョン。-
    setLocaleInStorageストレージ（local storage または cookie、設定に基づく）にロケールを設定します。-
    setLocaleCookie非推奨。代わりに setLocaleInStorage を使用してください。cookie にロケールを設定します。-
    localeInStorageストレージ（ローカルストレージまたはクッキー）からロケールを取得します。-
    localeCookie非推奨。代わりに localeInStorage を使用してください。クッキーからロケールを取得します。-

    コンポーネント

    インポート:

    tsx
    import "react-intlayer";

    or

    tsx
    import "react-intlayer/markdown";
    コンポーネント説明関連ドキュメント
    MarkdownProviderMarkdownレンダリングコンテキストのプロバイダー。Markdown要素のカスタムコンポーネント上書きを可能にします。-
    MarkdownRendererカスタムコンポーネントを使用してMarkdownコンテンツをレンダリングします。標準のMarkdown機能とIntlayer固有の構文をサポートします。MarkdownRenderer

    型

    インポート:

    tsx
    import "react-intlayer";
    型説明
    IntlayerNodeIntlayer コンテンツツリー内のノードを表す型。型安全なコンテンツ操作に使用されます。

    サーバーサイド (react-intlayer/server)

    インポート:

    tsx
    import "react-intlayer/server";
    エクスポート型説明
    IntlayerServerProviderComponentサーバーサイドレンダリング用のProvider。
    IntlayerServerComponentIntlayer コンテンツのサーバーサイド用ラッパー。
    tFunction翻訳関数のサーバーサイド版。
    useLocaleHookサーバー側で locale にアクセスするための Hook。
    useIntlayerHookuseIntlayer のサーバー側バージョン。
    useDictionaryHookuseDictionary のサーバー側バージョン。
    useI18nHookuseI18n のサーバー側バージョン。
    localeFunctionサーバー上でロケールを取得または設定する関数。
    validatePrefixIntlayerProvider