Локализация приложения React с помощью react-i18next

Одной из функций, запрошенных для моего личного приложения, было добавление нескольких языков! А именно немецкий и испанский. Поэтому я решил пойти дальше и изучить react-i18next.

Вот краткое описание от команды react-i18next того, для чего это нужно:

react-18next — это мощная платформа интернационализации для React/React Native, основанная на i18next

После этого краткого введения давайте продолжим и приступим к настройке!

Настройка

Для начала установим необходимые пакеты:

npm install react-i18next i18next

С созданными пакетами создадим файл конфигурации в корне, назовем его i18n.ts.

Примечание. Я использую TypeScript.

В файле мы продолжим и импортируем необходимые модули из пакетов, которые мы только что установили:

Несколькими строками ниже мы начнем настройку.

Конфигурация

Платформа i18next ожидает ресурсы для различных локализаций. Это делается с помощью пары ключ:значение перевода и фактического текста. В идеале это должно быть разделено на разные локали, поэтому, например, в моем приложении для немецкого, испанского и английского объект ресурса будет выглядеть так:

Для заполнения ресурсов я лично предпочитаю создать папку с именем locale и начать помещать в нее свои переводы:

Затем я импортирую их в файл конфигурации и устанавливаю значения внутри объекта ресурса:

Небольшой пример файла ресурсов (в формате JSON):

{   
    "about": "Über" 
}

После этого мы создадим languageDetector, эта часть конфигурации определит, какой язык отображать при запуске приложения:

Давайте разберем это: объект languageDetector ожидает несколько свойств. Во-первых, тип, указывающий, что это languageDetector. После этого мы обозначим его как асинхронный процесс. Настоящим мясом и костями этого является свойство detect, в моем случае у меня есть хранилище Zustand для получения языка, важно использовать функцию обратного вызова свойства обнаружения, чтобы установить его правильно.

Это потребует код языка, который непосредственно соответствует ресурсам, которые мы настроили ранее. В моем случае мне не нужны функции инициализации или свойства cacheUserLanguage, поэтому я просто оставляю их пустыми для целей Typescript.

Важно: если у вас нет языка для пользователя, хранящегося в каком-то другом месте, и вы просто хотите получить его прямо из браузера, для этого есть специальный пакет!

npm install i18next-browser-languagedetector

Это определит язык в браузере. После установки вы можете импортировать его из пакета:

import LanguageDetector from 'i18next-browser-languagedetector';

Последний шаг — создать экземпляр i18n и экспортировать его!

По сути, мы просто подключаем все ранее настроенные свойства. В функции инициализации мы устанавливаем fallbackLng на случай, если наш languageDetector не сработает.

Заключительные шаги

В нашем корневом файле, где мы изначально отображаем наше дерево React, давайте продолжим и импортируем наш файл конфигурации:

import './i18n';

Теперь вы можете начать вызывать ключи локализации, используя пространство имен и ключ с хуком, предоставленным react-i18next:

Здесь common — это подсвойство объекта ресурса, который мы установили ранее, чтобы разделить наши локализации! Аккуратный! а затем я просто вызываю ключ из JSON-файла, и он отображает правильный перевод.

Примечание. Вы можете динамически установить язык с другим свойством внутри возвращаемого значения useTranslationхука:

Если у вас есть какой-либо другой способ настроить локализацию для вашего приложения или какой-либо отзыв, оставьте его в комментариях ниже!

Больше контента на Relatable Code

Первоначально опубликовано на https://relatablecode.com 23 января 2022 г.

Создавайте компонуемые приложения

Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых фреймворках, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.

Перенесите свою команду в Bit Cloud, чтобы совместно размещать и совместно работать над компонентами, а также значительно ускорить, масштабировать и стандартизировать разработку в команде. Начните с компонуемых интерфейсов, таких как Design System или Micro Frontends, или исследуйте компонуемый сервер. Попробуйте →

Узнать больше