# gt-next: General Translation Next.js SDK: useLocaleSelector
URL: https://generaltranslation.com/ru/docs/next/api/helpers/use-locale-selector.mdx
---
title: useLocaleSelector
description: Справка по API Hook useLocaleSelector
---

{/* АВТОМАТИЧЕСКИ СГЕНЕРИРОВАНО: Не редактируйте напрямую. Вместо этого изменяйте template в content/docs-templates/. */}


## Обзор

Этот Hook возвращает текущую локаль, список локалей, Hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) и функцию для получения свойств локали.
Он предназначен для удобного использования при создании собственного компонента выбора локали.

Если вы не хотите реализовывать его самостоятельно, вместо этого можно использовать компонент [`<LocaleSelector>`](/docs/next/api/components/locale-selector).

## Справка

### Возвращает

Объект, содержащий текущую локаль, список локалей, Hook [`useSetLocale`](/docs/next/api/helpers/use-set-locale) и функцию, возвращающую свойства локали.

***

## Примеры

### `<LocaleSelector>`

Ниже приведён пример реализации компонента [`<LocaleSelector>`](/docs/next/api/components/locale-selector).

```jsx
export default function LocaleSelector({
  locales: _locales,
  ...props
}: {
  locales?: string[];
  [key: string]: any;
}): React.JSX.Element | null {
  // Получаем свойства компонента выбора локали
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
    _locales ? _locales : undefined
  );

  // Получаем отображаемое имя
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // Если локали не возвращены, ничего не рендерим или обрабатываем ситуацию корректно
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <select
      {...props}
      // Если currentLocale не определён, используем пустую строку
      value={locale || ''}
      onChange={(e) => setLocale(e.target.value)}
    >
      {/* Запасной вариант на случай, если локаль не задана */}
      {!locale && <option value='' />}

      {locales.map((locale) => (
        <option key={locale} value={locale} suppressHydrationWarning>
          {getDisplayName(locale)}
        </option>
      ))}
    </select>
  );
}
```

***

## Примечания

* Этот Hook доступен только на стороне клиента.
* Подробнее о кодах локалей читайте [здесь](/docs/core/locales).

## Что дальше

* Подробнее о компоненте [`<LocaleSelector>`](/docs/next/api/components/locale-selector).
* Подробнее о Hook [`useLocale`](/docs/next/api/helpers/use-locale).