概要

<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 フックを確認する
• ロケールコード文字列の詳細はこちら