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

Рассказываем, что такое библиотека React-i18next и как с ее помощью можно локализовать приложение.
Эта статья будет полезна, если вы немного знаете основы JS и React и хотите узнать что-то новое. Если вы пока с ними не знакомы, рекомендуем пройти профессию «Фронтенд-разработчик» на Хекслете.
Для глобального рынка разрабатывается все больше сервисов и продуктов. А это значит, что ваше приложение должно работать на аудиторию, говорящую на разных языках и диалектах. В React нет встроенной интернационализации i18n
, но локализовать приложение несложно, особенно с помощью i18next
.
Разберем основные термины, необходимые для понимания статьи.
i18n
— это сокращение от слова интернационализация, где «18» обозначает количество букв между первой i и последней n. Эта аббревиатура используется во всех языках программирования.
i18next
— это фреймворк интернационализации, написанный на JavaScript и для JavaScript, который интегрируется в код приложения.
React-i18next
— это мощный набор компонентов, хуков и плагинов, которые работают поверх i18next
. Давайте узнаем, как его использовать для приложений React.
Содержание
Установка и настройка react-i18next
Чтобы начать использовать react-i18next
для локализации приложения, нужно добавить его в проект:
i18next
предоставляет ряд плагинов и утилит, которые расширяют возможности библиотеки. Например, плагин i18next-browser-languageDetector используется для определения языка пользователя в браузере.
Установим его стандартным способом с помощью npm:
Установив библиотеки, создадим и настроим экземпляр i18next
:
i18next
предоставляет также провайдер I18nextProvider
. В провайдер можно обернуть компонент и передать экземпляр i18next
, который вы инициализировали. Обычно это не требуется, но в документации можно посмотреть сценарии использования, в которых экземпляр может пригодиться.
Читайте также:
Маршрутизация в React Router: как она работает и почему ее выбирают разработчики
Отладка i18next
Еще одна удобная опция конфигурации, которую предоставляет i18next
, — это отладка. Мы можем установить значение true, чтобы получить вывод в консоль браузера, когда в i18next
происходят определенные события, такие как завершение инициализации или изменение языка.
Использование react-i18next
Мы сделали первоначальную настройку и теперь можем приступить к работе с текстами.
react-i18next
представляет хук useTranslation()
, с помощью которого можно получить доступ к функции t()
. Она принимает ключ и возвращает соответствующую строку из переводов активного языка. Хук useTranslation()
гарантирует, что наши компоненты получат t()
, связанную с нашим экземпляром i18next
.
Мы рассмотрели основные возможности библиотеки react-i18next
. Если вы хотите узнать больше, дополнительную информацию можно найти в ее официальной документации.
Станьте профессиональным фронтенд-разработчиком с нуля за 10 месяцев
На Хекслете есть профессия [«Фронтенд-разработчик»](https://ru.hexlet.io/programs/frontend?utm_source=hexlet&utm_medium=blog&utm_campaign=prof-frontend&utm_content=i18next react&utm_term=post_280423). Пройдите ее, чтобы изучить один из самых известных языков программирования, освоить популярные фреймворки и создать большое портфолио с проектами на GitHub.
Olga Pejenkova
2 года назад