Internationalization for Redux/React and Redux/React Native projects
Всем привет!
Сегодня я хочу показать вам способ сделать ваш проект на React и Redux доступным и дружелюбным для людей, живущих в разных странах и говорящих на разных языках.
Объединяемся!
План действий:
- Ознакомиться с пакетом npm redux-react-i18n
- Собрать всю текстовую информацию проекта в словаре (с ключами с поддержкой плюральных форм)
- Перевести словари на те языки, которые вы планируете поддержать
- Установить и подключить redux-react-i18n
- Что с RTL?
- … профит!
Итак, пойдём по порядку
1. redux-react-i18n
Репозиторий тут https://github.com/derzunov/redux-react-i18n
Он имеет доступный README и наглядное демо:
Я не вижу особого смысла в дублировании того, что уже написано и продемонстрировано на странице проекта. Повторю только самое интересное.
Пакет умеет работать со словарями и варьировать плюральные формы большого количества языков. При этом ключи с указанием плюральных форм могут быть сложносоставленными.
Покажу, пожалуй, простой наглядный пример фразы (жирным выделены части фразы, зависящие от числа):
С момента входа прошёл 1 час.
С момента входа прошло 3 часа.
С момента входа прошло 25 часов.
С момента входа прошёл 451 час.
Забегая вперёд, скажу, что сложносоставленный ключ для такой формулировки будет выглядеть так:
Так вот, возвращаясь к нашей теме, в русском языке 3 плюральных формы(есть лёгкое для запоминания правило “1, 3, 5” — “1 котик, 3 котика, 5 котиков”), в арабском 6, а в английском 2. В польском языке, как и в русском, 3 формы, но правила выбора первой, второй или третьей отличаются от русского. Также отличается и французский язык от немецкого и английского. Короче, для разных языков разные правила.
Так вот redux-react-i18n умеет различать языки и правильно выбирать механику плюральных форм. Подробнее смотрите на странице описания. Список поддерживаемых языков можно найти там же.
Что у него внутри:
- Редьюсер i18n
- Экшны для работы с i18n
- Компонент-представление (можно взять его и не использовать полное решение, предлагаемое пакетом, но это не рекомендуется)
- Компонент-контейнер (рекомендуется к использованию вместе с полным решением и схемой стейта, предлагаемой в redux-react-i18n)
Также пакет redux-react-i18n доступен в npm:
2. Словарь
Здесь вроде всё просто. Любой текст на вашем сайте должен переехать в словарь вида “ключ-значение” (примеры также доступны на странице redux-react-i18n)
На всякий случай покажу простейший пример словаря на русском:
Ключи желательно называть максимально семантично, вместо key_1…key_n, но это кому как больше нравится :)
3. Переводы
Теперь, имея словарь, вы можете обратиться к переводчикам (платно или к знакомым бесплатно/подешевле) и получить из одного словаря на исходном языке несколько словарей на необходимых языках.
А вот перевод нашего исходного словаря на польский:
4. Установка и настройка redux-react-i18n
Первым делом что?
npm i redux-react-i18n
Установили redux-react-i18n, теперь включаем в state наши словари посредством диспатча экшнов, которые предоставляются пакетом так, как показано в его документации и в примере.
Очень сжатую демонстрацию добавлю и сюда:
5. RTL
Если вы собираетесь поддерживать, например, арабский язык, то вам непременно понадобится какое-то решение для адаптации вёрстки и внешнего вида проекта под RTL (Right-to-Left)
Я крайне рекомендую для этой цели использовать плагин postCSS — postcss-rtl
6. Профит ! (Вы, как всегда, восхитительны!)
Итак, вы дошли до финала, теперь ваш проект доступен людям из разных частей света, а Мир стал добрее и дружелюбнее!
P.S. React Native
Используйте пакет-обёртку:
