Локалізація інтерфейсу в React: налаштування багатомовності та перемикання мови

Основи інтернаціоналізації в React

Інтернаціоналізація, або i18n, – це процес, який допомагає адаптувати програмні продукти під різні мови та культурні особливості. У випадку з FrontEnd-розробкою, i18n включає створення багатомовних інтерфейсів, де переклад тексту – лише частина завдання. React як бібліотека для побудови користувацьких інтерфейсів дає змогу гнучко підходити до організації i18n, особливо з використанням спеціалізованих бібліотек. У статті ми обговоримо, що таке локалізація інтерфейсу React, її налаштування та вибір бібліотек.

А вивчитися на фронтенд девелопера ви можете на курсах FoxmindEd.

Основні завдання i18n у React

Для розробки багатомовного застосунку React потрібно враховувати кілька ключових завдань:

• Виділення перекладів: усі текстові елементи мають бути винесені з коду в окремі файли, щоб спростити їхній переклад і оновлення.
• Управління мовними ресурсами: систематизація та зберігання перекладів для кожної мови.
• Динамічне перемикання мови в React: додавання функції, що дає змогу користувачеві обирати бажану мову.
• Форматування даних: приведення чисел, дат, валют та інших даних до стандартів конкретного регіону.

Основні терміни та поняття i18n

Щоб простіше працювати з i18n у React, потрібно розуміти такі терміни:

• Локаль: це комбінація мови та регіону (наприклад, es-ES для іспанської в Іспанії, а es-MX – іспанська для Мексики).
• Ключ перекладу: унікальний ідентифікатор для кожного тексту, який потрібно перекласти, наприклад, greeting для «Привіт».
• Файл перекладів: файл із парами «ключ-значення» для певної локалі, наприклад, en.json для англійських текстів.
• Провайдер локалізації: компонент, який керує локаллю та надає доступ до перекладів.

Підбір бібліотек для локалізації в React

Порівняння бібліотек для інтернаціоналізації

Існує безліч бібліотек для i18n у React, кожна зі своїми особливостями. react-i18next – найкраща бібліотека для i18n react завдяки своїй гнучкості та широкому функціоналу.

Рекомендації щодо вибору бібліотеки

• Складність проєкту: для простого застосунку підійде React-intl, а для складного, де багато перекладених модулів і динамічних компонентів, краще використовувати react-i18next.
• Необхідний функціонал: оцініть, чи потрібна підтримка плюралізації, форматування дат або RTL (праворуч-наліворуч). React-i18next покриває більшість таких потреб.
• Підтримка і документація: важливий фактор – наявність хорошої документації та активної спільноти.

FoxmindEd – це навчальний центр, що має велику різноманітність напрямків курсів для новачків та програмістів з досвідом!

Тільки починаєте свій шлях в ІТ? Спробуйте курси Start

Вже маєте базові навички програмування? Тоді
курси Junior саме для вас.

Хочете поглибити свої знання в ІТ? Ми маємо курси Middle/Senior

Покрокове налаштування багатомовності з react-i18next

Створення файлів перекладів

Кожен файл відповідає одній локалі та містить пари ключ-значення:

{

  "greeting": "Hello",

  "welcome": "Welcome to our app!"

}

В es.json додамо переклади:

{

  "greeting": "Hola",

  "welcome": "¡Bienvenido a nuestra aplicación!"

}

Настройка провайдера i18next

Додаємо провайдер i18next у наш застосунок. Підключення робиться через бібліотеку react-i18next у кореневому файлі, зазвичай App.js, де ми обертаємо весь застосунок в I18nextProvider. Тепер він дає змогу нашим компонентам підключатися до перекладу і реагувати на зміну мови.

Використання перекладів у компонентах React

Коли провайдер налаштований, можна застосовувати переклади всередині компонентів.

Приклади використання перекладів

Розглянемо приклад того, як можна використовувати переклад (для цього ми імпортуємо useTranslation з react-i18next і далі – викликаємо функцію t):

import { useTranslation } from 'react-i18next';

function MyComponent() {

  const { t } = useTranslation();

  return <div>{t('greeting')}</div>;

}

Тепер, у разі зміни мови, текст у MyComponent відображатиметься обраною мовою.

Організація файлів перекладів

У великих проєктах краще організувати файли перекладів за модулями – це спрощує оновлення та редагування контенту. Наприклад, можна створити окремі файли для кожної сторінки, як-от home.json, profile.json, і завантажувати їх за потреби.

Реалізація функції перемикання мови в додатку

Залишилося додати функцію для перемикання мови в React в інтерфейсі.

Створення компонента для зміни мови

Створимо компонент LanguageSwitcher, який дає змогу користувачеві вибрати мову. У ньому можна додати кнопки або список, що випадає, з прапорами країн, щоб користувач одразу зрозумів, яку мову обирає:

import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {

  const { i18n } = useTranslation();

  const handleLanguageChange = (language) => {

    i18n.changeLanguage(language);

  };

  return (

    <div>

      <button onClick={() => handleLanguageChange('en')}>EN</button>

      <button onClick={() => handleLanguageChange('ru')}>RU</button>

    </div>

  );

}

Налаштування i18n.changeLanguage() для React

Метод i18n.changeLanguage() дозволяє динамічно змінювати поточну локаль. Після його виклику компоненти, що використовують useTranslation, автоматично оновлюють відображення тексту. Збереження обраної мови в local storage або в Redux дасть змогу зберегти вибір користувача навіть після перезавантаження.

Висновок

Локалізація – це не тільки переклад текстів, а й адаптація застосунку до культурних особливостей різних країн. Налаштування багатомовності react – чудовий помічник у цій справі. Враховуйте також формати дат, валют, а також сортування даних.