Overview

The useLocale hook retrieves the user’s current locale from the <GTProvider> context. The returned locale is formatted as a string, e.g. 'en-US'.

For server-side locale management, see getLocale.

Reference

Returns

A string representing the user's current locale, e.g. 'en-US'.

Fallback behaviour

When an unsupported locale is requested, a fallback locale will be selected.

For instance, if a requested locale isn’t supported, and (1) the user has configured multiple preferred locales in their browser settings, and (2) one of these locales is supported by your application, then the locale will fall back to the most appropriate language.

Additionally, if no direct fallback locales are available, but two locales share the same language (e.g., en-US and en-GB), then the locale will fall back to the supported locale that shares the same language.

If neither condition can be met, the default locale will be used.

See the gt.config.json docs for information on configuring supported locales.

Examples

Basic usage

Retrieve the current locale and display it in your component.

"use client";
import { useLocale } from 'gt-next';

export default function CurrentLocale() {
    const locale = useLocale(); 
    return <p>Current locale: {locale}</p>;
}

Notes

• The useLocale hook relies on the <GTProvider> to access the context. Ensure your app is wrapped with a provider at the root level.
• useLocale is client-side only.
• Learn more about locale strings here.

Next steps

• Learn how to manage and specify supported locales in your application with the gt.config.json file.