Рассказываем, что такое библиотека React-i18next и как с ее помощью можно локализовать приложение.
Эта статья будет полезна, если вы немного знаете основы JS и React и хотите узнать что-то новое. Если вы пока с ними не знакомы, рекомендуем пройти профессию «Фронтенд-разработчик» на Хекслете.
Для глобального рынка разрабатывается все больше сервисов и продуктов. А это значит, что ваше приложение должно работать на аудиторию, говорящую на разных языках и диалектах. В React нет встроенной интернационализации i18n, но локализовать приложение несложно, особенно с помощью i18next.
Разберем основные термины, необходимые для понимания статьи.
i18n — это сокращение от слова интернационализация, где «18» обозначает количество букв между первой i и последней n. Эта аббревиатура используется во всех языках программирования.
i18next — это фреймворк интернационализации, написанный на JavaScript и для JavaScript, который интегрируется в код приложения.
React-i18next — это мощный набор компонентов, хуков и плагинов, которые работают поверх i18next. Давайте узнаем, как его использовать для приложений React.
Установка и настройка react-i18next
Чтобы начать использовать react-i18next для локализации приложения, нужно добавить его в проект:
npm install --save i18next react-i18next
i18next предоставляет ряд плагинов и утилит, которые расширяют возможности библиотеки. Например, плагин i18next-browser-languageDetector используется для определения языка пользователя в браузере.
Установим его стандартным способом с помощью npm:
npm install i18next-browser-languagedetector
Установив библиотеки, создадим и настроим экземпляр i18next:
// файл src/i18next.js
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import resources from './locales/index.js';
i18next
.use(initReactI18next) // передаем экземпляр i18n в react-i18next, который сделает его доступным для всех компонентов через context API.
.use(LanguageDetector) // с помощью плагина определяем язык пользователя в браузере
.init({
resources, // передаем переводы текстов интерфейса в формате JSON
fallbackLng: 'ru', // если переводы на языке пользователя недоступны, то будет использоваться язык, указанный в этом поле
interpolation: {
escapeValue: false, // экранирование уже есть в React, поэтому отключаем
},
});
export default i18next;
i18next предоставляет также провайдер I18nextProvider. В провайдер можно обернуть компонент и передать экземпляр i18next, который вы инициализировали. Обычно это не требуется, но в документации можно посмотреть сценарии использования, в которых экземпляр может пригодиться.
Читайте также: Маршрутизация в React Router: как она работает и почему ее выбирают разработчики
Отладка i18next
Еще одна удобная опция конфигурации, которую предоставляет i18next, — это отладка. Мы можем установить значение true, чтобы получить вывод в консоль браузера, когда в i18next происходят определенные события, такие как завершение инициализации или изменение языка.
import i18next from 'i18next';
// ...
i18next
.init({
// ...
debug: true,
});
export default i18next;
Использование react-i18next
Мы сделали первоначальную настройку и теперь можем приступить к работе с текстами.
react-i18next представляет хук useTranslation(), с помощью которого можно получить доступ к функции t(). Она принимает ключ и возвращает соответствующую строку из переводов активного языка. Хук useTranslation() гарантирует, что наши компоненты получат t(), связанную с нашим экземпляром i18next.
import React from 'react';
import { useTranslation } from 'react-i18next';
export default = () => {
const { t, i18n } = useTranslation();
const handleLangSwitch = (e) => {
const lang = e.target.dataset.lang;
i18n.changeLanguage(lang);
}
return (
<button
className="btn btn-primary"
data-lang="en"
onClick={handleLangSwitch}
>
{t('languages.en')}
</button>
);
}
Мы рассмотрели основные возможности библиотеки react-i18next. Если вы хотите узнать больше, дополнительную информацию можно найти в ее официальной документации.
Станьте профессиональным фронтенд-разработчиком с нуля за 10 месяцев На Хекслете есть профессия «Фронтенд-разработчик». Пройдите ее, чтобы изучить один из самых известных языков программирования, освоить популярные фреймворки и создать большое портфолио с проектами на GitHub.
