Локализация интерфейса

React Aria предоставляет инструменты для создания доступных компонентов пользовательского интерфейса, включая поддержку локализации и интернационализации. Основная цель — обеспечить корректное отображение текста, чисел, дат и других элементов в зависимости от языка и региональных настроек пользователя.

Основные концепции локализации

  1. Locale В React Aria локализация строится вокруг объекта locale, который определяет язык, регион и настройки формата данных. Например:

    import {useLocale} from '@react-aria/i18n';

function App() {
  let {locale} = useLocale();
  console.log(locale); // 'en-US' или 'ru-RU'
}

    Ключевой момент: locale влияет на форматирование дат, чисел и валют, а также на направление текста (ltr или rtl).

  2. Directionality (Направление текста) Некоторые языки требуют правостороннего направления текста. React Aria учитывает это через dir:

    import {useLocale} from '@react-aria/i18n';

let {direction} = useLocale();
// 'ltr' для английского, 'rtl' для арабского

    Компоненты автоматически применяют правильное направление при рендере.

Форматирование чисел и валют

React Aria использует стандарт ECMAScript Internationalization API для корректного отображения чисел в зависимости от локали:

import {useNumberFormatter} from '@react-aria/i18n';

function Price({amount}) {
  let formatter = useNumberFormatter({
    style: 'currency',
    currency: 'USD'
  });

  return <span>{formatter.format(amount)}</span>;
}

Особенности:

  • style может быть 'decimal', 'currency' или 'percent'.
  • currency задаёт валюту (например, 'EUR' или 'RUB').
  • Локаль автоматически влияет на разделители тысяч и десятичные точки.

Форматирование дат и времени

Для работы с датами React Aria предоставляет useDateFormatter и useTimeFormatter:

import {useDateFormatter} from '@react-aria/i18n';

function EventDate({date}) {
  let formatter = useDateFormatter({
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });

  return <span>{formatter.format(date)}</span>;
}

Ключевые параметры:

  • weekday: 'long' | 'short' | 'narrow'
  • month: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'
  • day: 'numeric' | '2-digit'
  • year: 'numeric' | '2-digit'

Использование этих параметров позволяет отображать даты в формате, привычном для конкретного региона.

Локализация сообщений и плейсхолдеров

React Aria поддерживает переводы статических и динамических текстов через объект messages.

Пример кастомных сообщений:

import {useMessageFormatter} from '@react-aria/i18n';
import intlMessages from './messages.json';

function SearchInput() {
  let formatMessage = useMessageFormatter(intlMessages);

  return (
    <input
      aria-label={formatMessage('searchLabel')}
      placeholder={formatMessage('searchPlaceholder')}
    />
  );
}

messages.json может выглядеть так:

{
  "en-US": {
    "searchLabel": "Search",
    "searchPlaceholder": "Type to search..."
  },
  "ru-RU": {
    "searchLabel": "Поиск",
    "searchPlaceholder": "Введите текст для поиска..."
  }
}

Принцип: один объект messages содержит переводы для всех поддерживаемых локалей. React Aria автоматически выбирает нужный набор на основе текущего locale.

Локализация компонентов форм

Компоненты форм в React Aria, такие как DatePicker, Slider и ComboBox, учитывают локаль при форматировании и озвучивании:

  • DatePicker: корректно форматирует дату и подсказки для экранных читалок.
  • Slider: числа и единицы измерения адаптируются к локали.
  • ComboBox: сортировка и отображение элементов учитывают правила языка.

Пример использования DatePicker с локалью:

import {DatePicker} from '@react-aria/datepicker';
import {useLocale} from '@react-aria/i18n';

function LocalizedDatePicker() {
  let {locale} = useLocale();

  return <DatePicker locale={locale} />;
}

Динамическая смена локали

Для интерфейсов с несколькими языками важно уметь менять локаль на лету:

import {LocaleProvider} from '@react-aria/i18n';

function App({locale}) {
  return (
    <LocaleProvider locale={locale}>
      <MainUI />
    </LocaleProvider>
  );
}

LocaleProvider распространяет выбранную локаль по всем дочерним компонентам, обеспечивая согласованное форматирование чисел, дат и текста.

Итоговые рекомендации

  • Всегда использовать useLocale и LocaleProvider для поддержки разных языков.
  • Форматирование чисел, валют и дат должно опираться на React Aria API, а не на кастомные функции.
  • Сообщения и плейсхолдеры хранить в объекте messages для каждой локали.
  • Компоненты автоматически учитывают направление текста и специфические региональные настройки, если задан locale.

Это позволяет создавать полностью локализованный интерфейс, соответствующий стандартам доступности и удобства для пользователей из разных регионов.

Оглавление