<LocaleSelector>

概要

<LocaleSelector>コンポーネントは、ユーザーのロケールを選択するために使用されます。 これはクライアントサイドのコンポーネントで、ロケールを選択するためのドロップダウンを提供します。

Reference

Returns

ユーザーがロケールを選択できるコンポーネント。

Props

• locales (オプション): string[]
  • ドロップダウンに表示するロケールのオプションリスト（例：['en', 'es-MX', 'fr']）。提供されない場合は、<GTProvider>コンテキストからのロケールリストが使用されます。
• customNames (オプション): {[locale: string]: string}
  • ロケールコードをカスタム表示名にマップするオプションオブジェクト。
  • 例：{{ 'en-US': 'English (United States)', 'es': 'Español' }}

例

基本的な使用方法

import { LocaleSelector } from 'gt-next';

export default function MyComponent() {
    return (
        <LocaleSelector />
    );
}

customNamesを使用した使用方法

import { LocaleSelector } from 'gt-next';

export default function MyComponent() {
    const myCustomNames = {
        'en': 'English',
        'es': 'Español',
        'fr-CA': 'Français (Canada)'
    };
    return (
        <LocaleSelector customNames={myCustomNames} />
    );
}

注意事項

• <LocaleSelector> コンポーネントを使うと、アプリのロケールを変更できます。
• <LocaleSelector> コンポーネントはサーバーコンポーネントでは利用できません。

次のステップ

• useLocale() フックについて詳しく学びましょう。
• カスタムロケールセレクターを定義するには、useLocaleSelector() フックをチェックしてください。
• ロケール文字列の詳細はこちらをご覧ください。