概要

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

リファレンス

返り値

ユーザーが自分のlocaleを選択できるコンポーネント。

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': '英語',
        'es': 'スペイン語',
        'fr-CA': 'フランス語（カナダ）'
    };
    return (
        <LocaleSelector customNames={myCustomNames} />
    );
}

注意事項

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

次のステップ

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