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 dropdown. If not provided, the list of locales from the <GTProvider> context is used.
• customNames (optional): {[locale: string]: string}
  • An optional object to map 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 />;
}

Usage 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 allows you to select a different locale for your app.
• The <LocaleSelector> component is not 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.