Как использовать набор компонентов i18next для приложений React

Рассказываем, что такое библиотека 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.

Стать JS-разработчиком