Changing Language

Overview

In this guide, we'll show you how to change the language of your React app.

If you have not yet setup your app with gt-react, please refer to the setup guide before continuing.

Setup

There are three ways to change the language of your app using gt-react.

1. Using the useSetLocale() hook
2. Using the <LocaleSelector> component
3. Using the useLocaleSelector() hook

We'll cover all three methods in this guide.

Using the useSetLocale hook

The useSetLocale hook is a client-side hook that allows you to change the language of your app. It must be used within a GTProvider component.

import { useSetLocale } from 'gt-react';
export default function MyComponent() {
  const setLocale = useSetLocale();
 
  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}

Simply provide the locale you want to change to as the argument to the callback function returned by the useSetLocale hook.

Using the <LocaleSelector> component

The <LocaleSelector> component is a client-side component that allows you to change the language of your app. It must be used within a GTProvider component.

This is a bare-bones UI dropdown that displays all the locales you have enabled in your project, and allows users to select a different locale.

import { LocaleSelector } from 'gt-react';
 
export default function MyComponent() {
  return <LocaleSelector />;
}

Using the useLocaleSelector hook

Alternatively, if you would like to create your own locale selector component, you can use the useLocaleSelector hook.

This hook returns the current locale, the list of locales, and the useSetLocale hook.

import { useLocaleSelector } from 'gt-react';

See the API reference for more information.

Next steps

• Learn more about the useSetLocale hook.
• Learn more about the <LocaleSelector> component.
• Learn more about the useLocaleSelector hook.