creating a language switcher for i18n app

You can use i18n.activate() method to switch to needed locale.

i18n object API is defined in @js-lingui/core.

You also need to load the locale if it was not loaded before.

In case of your project you can use handy dynamicActivate() function you’ve already created.

Your component output will look like this:

<div>
    <Trans>Switch to:</Trans>
    <button
        onClick={() => dynamicActivate('en')}>
        English
    </button>
    <button
        onClick={() => dynamicActivate('fr')}>
        Français
    </button>
    <button
        onClick={() => dynamicActivate('es')}>
        Espanol
    </button>
</div>

It will render 3 buttons [English] [Français] [Espanol] each one will load and activate needed locale.

It is a best practice to keep the button captions in their own languages, so users can find a language they understand.

As an addition to the above it probably makes sense to highlight currently-selected language and disable the button.

I’m using useLingui() to get i18n.locale which indicates current language and set disabled flag on one of the buttons bellow.

Here is the full code of LanguageSelector.js component for you, you can use it in App.js as <LanguageSelector />. Good luck with your project/learnings.

import React from "react"
import { useLingui } from "@lingui/react"
import { Trans } from "@lingui/macro";
import { dynamicActivate } from "./i18n";

const LanguageSelector = () => {
    const { i18n } = useLingui();

    return <div>
            <Trans>Switch to:</Trans>
            <button
                onClick={() => dynamicActivate('en')}
                disabled={i18n.locale === 'en'}>
                English
            </button>
            <button
                onClick={() => dynamicActivate('fr')}
                disabled={i18n.locale === 'fr'}>
                Français
            </button>
            <button
                onClick={() => dynamicActivate('es')}
                disabled={i18n.locale === 'es'}>
                Espanol
            </button>
    </div>
};

export default LanguageSelector

UPDATED:

Additionally you can persist selected locale to browser’s LocalStorage

We should save locale each time the dynamicActivate() gets called:

const LOCAL_STORAGE_KEY = 'lang';

function dynamicActivate(locale: string) {
  // existing code here
  window.localStorage.setItem(LOCAL_STORAGE_KEY, locale);
}

Apparently the @lingui/detect-locale library has very good coverage for detecting locale from many sources, including LocalStorage.

Here’s how it can be applied here:

import { detect, fromUrl, fromStorage, fromNavigator } from '@lingui/detect-locale';

// existing code from i18n.ts

export const locales = {
  en: "English",
  es: "Spanish",
  fr: "French",
};

export const defaultLocale = "en";

const LOCAL_STORAGE_KEY = 'lang';

// checks that detected locale is available
const isLocaleValid = (locale: string | null) => `${locale}` in locales;

// returns locale 
export function getLocale() {
  const detectedLocale = detect(
    fromUrl("lang"), // for example http://localhost:3000/?lang=es
    fromStorage(LOCAL_STORAGE_KEY),
    fromNavigator(), // from system settings
    () => defaultLocale,
  );

  return isLocaleValid(detectedLocale) ? detectedLocale : defaultLocale;
}

The last step is to call getLocale() instead of using defaultLocale all the time.

    useEffect(() => {
        // With this method we dynamically load the catalogs
        dynamicActivate(getLocale());
    }, []);

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top