Локализация приложений i18next и React за 3 шага

Как начать работу с i18n в ReactJS?

Благодаря тому, что ReactJS - суперпопулярная библиотека, у нас так много вариантов. Самыми популярными библиотеками i18n являются i18next и yahoo / response-intl. Сегодня я покажу вам, как интегрировать i18next в ваше приложение ReactJS.

Создать образец проекта

Я начну с самого начала и создам образец приложения на ReactJS с TypeScript.

yarn create react-app simplelocalize-i18next-example --template typescript

Установите зависимости:

npm install --save react-i18next i18next i18next-http-backend i18next-browser-languagedetector

Нет, мы готовы начать!

Настройка i18next

Я создам i18n.ts файл, в который помещу всю конфигурацию i18next, после чего мы импортируем этот файл в index.ts. Мой i18n.ts выглядит так:

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
const projectToken = "5e13e3019cff4dc6abe36009445f0883";
const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/i18next/{{lng}}/{{ns}}/_index`;
i18n
  .use(Backend)
  .use(LanguageDetector)
  .use (initReactI18next)
  .init({
    // default/fallback language 
    fallbackLng: 'en',
    ns: ["default"],
    defaultNS: "default",
    //detects and caches a cookie from the language provided
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath
    }
  })
export default i18n;

Проект loadPath переменная

Создайте проект SimpleLocalize.io, чтобы получить вашу уникальную loadPath переменную. Для этого демонстрационного проекта вы можете использовать loadPath из приведенного выше примера!

Включить i18next в приложении

Настройка завершена, когда вы импортируете i18n.ts файл в index.ts, просто добавляя import './i18n';. Весь index.ts файл должен выглядеть так:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // import i18next configuration (!!)
ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

Мы сделали! Библиотека i18next готова к использованию.

Использование переводов в приложении

Теперь давайте воспользуемся переводами и создадим очень простую веб-страницу.

Импортировать useTranslation крючок

Чтобы импортировать хук i18next, мы используем следующий код:

import {useTranslation} from "react-i18next";
function App () {
  const {t, i18n} = useTranslation ();
  //...

Переменная t - это функция, используемая для загрузки переводов для данного ключа.

Использование t в коде приложения

t использование очень простое и понятное:

t("USE_BUTTONS_BELOW")

в HTML это будет выглядеть так:

<p>{t("USE_BUTTONS_BELOW")}</p>

Переключение между языком

Пришло время добавить возможность переключения языков. Я буду использовать простые кнопки без каких-либо причудливых стилей CSS. :) Я добавил 3 кнопки для английского, испанского и польского языков.

import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";
function App() {
  const { t, i18n } = useTranslation();
  return (
    <div>
          <p>
            {t("USE_BUTTONS_BELOW")}
          </p>
          <button onClick={() => i18n.changeLanguage("en")}>English</button>
          <button onClick={() => i18n.changeLanguage("es")}>Spanish</button>
          <button onClick={() => i18n.changeLanguage("pl")}>Polish</button>
        </div>
  );
}
export default App;

Давай проверим!

Обратите внимание, что перевод выполняется в реальном времени! Как это круто? Очень круто!

Оформить заказ в реальном времени

Код проекта доступен на GitHub.