Overview

The <LocaleSelector> component is used to select the user's locale. It is a client-side component that provides a dropdown to select the locale.

Reference

Returns

A component that allows the user to select their locale.

Props

• locales (optional): string[]
  • An optional list of locales (e.g. ['en', 'es-MX', 'fr']) to populate the drop-down. If not provided, the list of locales from the <GTProvider> context is used.
• customNames (optional): {[locale: string]: string}
  • An optional object mapping locale codes to custom display names.
  • Example: {{ 'en-US': 'English (United States)', 'es': 'Español' }}

Examples

Basic usage

import { LocaleSelector } from 'gt-next';

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

Use with 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} />
    );
}

Notes

• The <LocaleSelector> component lets you choose a different locale for your app.
• The <LocaleSelector> component isn’t available in the server component.

Next steps

• Learn more about the useLocale hook.
• Check out the useLocaleSelector hook for defining a custom locale selector.
• Learn more about locale strings here.