useLocale()

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 behavior

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

For instance, in the event of an unsupported locale, if (1) the user has configured multiple preferred locales in their browser settings, and (2) one of these locales are supported by your application, then the locale will fallback to the best language.

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

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

See initGT() 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/client';
 
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 locale management.
• To access the fallback language, see useDefaultLocale().