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'.

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 example, if an unsupported locale is requested, and (1) the user has configured multiple preferred locales in their browser settings, and (2) one of those locales is supported by your application, then the locale will fall back to the best match.

Additionally, if no suitable 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 is met, the default locale will be used.

See <GTProvider> for information on configuring supported locales.

Examples

Basic usage

Retrieve the current locale and display it in your component.

import { useLocale } from 'gt-react';

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.
• 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.