useIntlayer フックのドキュメント

useIntlayer フックを使用すると、Remix 3 アプリケーションでキーを指定して Intlayer 辞書からローカライズされたコンテンツを取得できます。

現在のリクエストコンテキスト（AsyncLocalStorage 経由）からアクティブなロケールを自動的に読み取るため、ルートハンドラー、ビューテンプレート、またはコンポーネント間でロケールを受け渡す必要はありません。

使用方法

ルートハンドラー内での使用

import { createRouter } from "remix/router";
import { intlayer, useIntlayer } from "remix-intlayer";

const router = createRouter({
  middleware: [intlayer()],
});

router.get("/api/welcome", () => {
  const content = useIntlayer("home");

  return Response.json({
    title: content.title,
    subtitle: content.subtitle,
  });
});

ビューテンプレートおよびコンポーネント内での使用

import { useIntlayer } from "remix-intlayer";

export const HomeView = () => {
  const content = useIntlayer("home");

  return `
    <main>
      <h1>${content.title}</h1>
      <p>${content.subtitle}</p>
    </main>
  `;
};

パラメーター

useIntlayer(key, localeOrSelector?)

1. key: 辞書の一意のキー（.content.ts 宣言ファイルで定義されたもの）。
2. localeOrSelector（オプション）: 特定のロケールまたはセレクターオブジェクト（{ item }、{ variant }、必要に応じて locale）。指定された場合、リクエストコンテキストから検出されたロケールを上書きします。

説明

このフックは以下の処理を実行します。

1. コンテキストロケールの取得: intlayer() ミドルウェアによって設定されたリクエストスコープの AsyncLocalStorage から現在のロケールを検出します。
2. 辞書の取得: 指定されたキーに対応する事前コンパイル済み辞書を取得します。
3. 翻訳処理: 解決されたロケールに基づいて、翻訳、列挙、マークダウン、および条件付きコンテンツを解決します。
4. フォールバック処理: アクティブな HTTP リクエストコンテキスト外（ミドルウェアのないバックグラウンドタスクや単体テストなど）で呼び出された場合、設定された defaultLocale に安全にフォールバックします。

関連ドキュメント

• intlayer ミドルウェア
• useDictionary フック
• useLocale フック