useLocale для текущей локали

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

Импорт и базовое использование

Для начала необходимо импортировать хук:

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

Простейший пример использования:

function LocaleInfo() {
  const { locale, direction } = useLocale();

  return (
    <div>
      <p>Текущая локаль: {locale}</p>
      <p>Направление текста: {direction}</p>
    </div>
  );
}
  • locale — строка, содержащая текущую локаль, например ru-RU или en-US.
  • direction — направление текста (ltr для слева направо, rtl для справа налево), полезно при построении интерфейсов для арабского или иврита.

Контекст локали

useLocale работает через контекст LocaleProvider, который предоставляет данные о локали всему дереву компонентов:

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

function App() {
  return (
    <LocaleProvider locale="ru-RU" timeZone="Europe/Moscow">
      <LocaleInfo />
    </LocaleProvider>
  );
}

Параметры LocaleProvider:

  • locale — строка с локалью. Если не передана, используется локаль браузера.
  • timeZone — временная зона, которая будет использоваться для форматирования времени и дат.
  • messages — объект с кастомными локализованными сообщениями для компонентов React Aria.

Использование LocaleProvider обеспечивает единообразное поведение всех компонентов, зависящих от локали.

Форматирование дат и чисел с учетом локали

Хук useLocale удобно комбинировать с функциями Intl.DateTimeFormat и Intl.NumberFormat:

function DateAndNumber() {
  const { locale } = useLocale();

  const date = new Date();
  const formattedDate = new Intl.DateTimeFormat(locale, {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);

  const number = 1234567.89;
  const formattedNumber = new Intl.NumberFormat(locale).format(number);

  return (
    <div>
      <p>Дата: {formattedDate}</p>
      <p>Число: {formattedNumber}</p>
    </div>
  );
}
  • В локали ru-RU число будет отображено как 1 234 567,89, а в en-US — 1,234,567.89.
  • Дата также будет соответствовать стандартам выбранной локали (понедельник, 16 марта 2026 г. для ru-RU).

Использование направления текста

direction из useLocale важен при построении интерфейсов с поддержкой RTL:

function TextBlock() {
  const { direction } = useLocale();

  return (
    <div style={{ direction }}>
      <p>Пример текста, автоматически учитывающего направление локали.</p>
    </div>
  );
}

Браузер корректно отобразит текст в зависимости от направления, обеспечивая правильное выравнивание и поведение элементов интерфейса.

Пользовательские сообщения и перевод компонентов

LocaleProvider позволяет передавать объект messages, который используется компонентами React Aria для локализованных подсказок, кнопок и меток:

const messages = {
  clear: 'Очистить',
  close: 'Закрыть',
  open: 'Открыть'
};

<LocaleProvider locale="ru-RU" messages={messages}>
  <SomeAriaComponent />
</LocaleProvider>
  • Компоненты автоматически подтягивают соответствующие строки из объекта messages.
  • Если строка отсутствует, React Aria использует значения по умолчанию для выбранной локали.

Взаимодействие с кастомными компонентами

Хук useLocale можно применять и в собственных компонентах для реализации:

  • Локализованного форматирования даты и времени.
  • Автоматического выбора числа и валюты.
  • Управления направлением текста и верстки элементов.
  • Подстановки локализованных сообщений, подсказок и меток.

Пример кастомного компонента с поддержкой локали:

function Price({ amount, currency }) {
  const { locale } = useLocale();

  const formatted = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency
  }).format(amount);

  return <span>{formatted}</span>;
}

Вызов <Price amount={1234.56} currency="USD" /> при локали ru-RU выведет 1 234,56 $, а при en-US — $1,234.56.

Ключевые моменты

  • useLocale предоставляет locale и direction.
  • Требует LocaleProvider для корректной работы и поддержки глобальной локали.
  • Интегрируется с Intl для форматирования чисел, дат, времени и валют.
  • Поддерживает передачу кастомных сообщений для компонентов.
  • Позволяет создавать интерфейсы, полностью адаптированные под региональные особенности пользователя.

Эффективное использование useLocale делает приложения React доступными и корректными для международной аудитории, обеспечивая единообразие локализованных элементов и их правильное отображение.

Оглавление