Создание переключателя языка для приложения i18n

Question

Я учусь внедрять Lingui(i18n) в приложения. Все настроено, но я хотел знать, как мне создать переключатель языков для переключения между языковыми каталогами в моем приложении.

Это мой файл index.js

import React, { useEffect } from "react";
import { render } from "react-dom";
import App from "./App";

import { I18nProvider } from "@lingui/react";
import { i18n } from "@lingui/core";
import { defaultLocale, dynamicActivate } from "./i18n";

const Translation = () => {
    useEffect(() => {
        dynamicActivate(defaultLocale);
    }, []);

    return (
        <I18nProvider i18n={i18n}>
            <App />
        </I18nProvider>
    );
};

render(<Translation />, document.getElementById("root"));

Мой файл App.js

import "./App.css";
import { Trans } from "@lingui/macro";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <h1>
                    <Trans>HELLOO</Trans>
                </h1>
                <p>
                    <Trans>it's me.</Trans>

                </p>
            </header>
        </div>
    );
}

export default App;

и файл i18n.ts

import { i18n } from '@lingui/core';

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

export const defaultLocale = "fr";

/**
* We do a dynamic import of just the catalog that we need
* @param locale any locale string
*/

export async function dynamicActivate(locale: string) {
  const { messages } = await import(`./locales/${locale}/messages`)
  i18n.load(locale, messages)
  i18n.activate(locale)
}

каждый раз, когда я указываю es, en или fr defaultLocale, язык меняется, но я хотел бы иметь кнопку выбора языка для автоматического изменения этого значения на странице с помощью select.

пример: "export const defaultLocale = "fr";" (в i18n.ts)

Answer 1

Вы можете использовать i18n.activate() метод переключения на нужную локаль.

API объекта i18n определен в @js-lingui / core.

Вам также необходимо загрузить локаль, если она не загружалась раньше.

В случае вашего проекта вы можете использовать удобный dynamicActivate() функция, которую вы уже создали.

Ваш компонентный вывод будет выглядеть так:

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

Он отобразит 3 кнопки [English] [Français] [Espanol] каждый загрузит и активирует необходимую локаль.

Лучше всего оставлять подписи к кнопкам на своих языках, чтобы пользователи могли найти язык, который они понимают.

В дополнение к вышесказанному, вероятно, имеет смысл выделить выбранный в данный момент язык и отключить кнопку.

я использую useLingui() получить i18n.locale который указывает текущий язык и устанавливает disabled флажок на одной из кнопок ниже.

Вот полный код LanguageSelector.js компонент для вас, вы можете использовать его в App.js в виде <LanguageSelector />. Удачи в вашем проекте / уроках.

       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

ОБНОВЛЕНО:

Кроме того, вы можете сохранить выбранный языковой стандарт в LocalStorage браузера.

Мы должны сохранять локаль каждый раз, когда dynamicActivate() называется:

       const LOCAL_STORAGE_KEY = 'lang';

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

Видимо @lingui/detect-locale библиотека имеет очень хорошее покрытие для определения локали из многих источников, включая LocalStorage.

Вот как это можно применить здесь:

       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;
}

Последний шаг - позвонить getLocale() Вместо того, чтобы использовать defaultLocale все время.

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