Intlayerでは、性別に基づくコンテンツはgender関数を通じて実現されます。この関数は特定の性別の値（'male'、'female'）を対応するコンテンツにマッピングします。この方法により、指定された性別に基づいて動的にコンテンツを選択することが可能です。React IntlayerやNext Intlayerと統合すると、実行時に提供された性別に応じて適切なコンテンツが自動的に選択されます。

性別に基づくコンテンツの設定

Intlayerプロジェクトで性別に基づくコンテンツを設定するには、性別特有の定義を含むコンテンツモジュールを作成します。以下に様々な形式の例を示します。

**/*.content.ts

コードをコピー

コードをクリップボードにコピー

import { gender, type Dictionary } from "intlayer";

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "男性ユーザー向けのコンテンツ",
      female: "女性ユーザー向けのコンテンツ",
      fallback: "性別が指定されていない場合のコンテンツ", // オプション
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

フォールバックが宣言されていない場合、性別が指定されていないか、定義された性別に一致しない場合は、最後に宣言されたキーがフォールバックとして使用されます。

React Intlayerでの性別ベースのコンテンツの使用

Reactコンポーネント内で性別ベースのコンテンツを利用するには、react-intlayerパッケージからuseIntlayerフックをインポートして使用します。このフックは指定されたキーのコンテンツを取得し、適切な出力を選択するために性別を渡すことができます。

**/*.tsx

コードをコピー

コードをクリップボードにコピー

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const GenderComponent: FC = () => {
  const { myGender } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* 出力: 男性ユーザー向けのコンテンツ */
          myGender("male")
        }
      </p>
      <p>
        {
          /* 出力: 女性ユーザー向けのコンテンツ */
          myGender("female")
        }
      </p>
      <p>
        {
          /* 出力: 男性ユーザー向けのコンテンツ */
          myGender("m")
        }
      </p>
      <p>
        {
          /* 出力: 女性ユーザー向けのコンテンツ */
          myGender("f")
        }
      </p>
      <p>
        {
          /* 出力: 性別が指定されていない場合のコンテンツ */
          myGender("")
        }
      </p>
      <p>
        {
          /* 出力: 性別が指定されていない場合のコンテンツ */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

追加リソース

設定や使用方法の詳細については、以下のリソースを参照してください：

これらのリソースは、さまざまな環境やフレームワークにおけるIntlayerのセットアップと使用方法について、さらに詳しい情報を提供します。

条件

挿入