Components
<LocaleSelector>
API Reference for the <LocaleSelector> component
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.
- An optional list of locales (e.g.,
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
"use client";
import { LocaleSelector } from 'gt-next/client';
export default function MyComponent() {
return (
<LocaleSelector />
);
}
Usage with customNames
"use client";
import { LocaleSelector } from 'gt-next/client';
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 here.
How is this guide?