# gt-next: General Translation Next.js SDK: useLocaleSelector
URL: https://generaltranslation.com/zh/docs/next/api/helpers/use-locale-selector.mdx
---
title: useLocaleSelector
description: useLocaleSelector Hook 的 API 参考
---

{/* 自动生成：请勿直接编辑。请改为编辑 content/docs-templates/ 中的模板。 */}


## 概述

此 hook 会返回当前区域设置、locales 列表、[`useSetLocale`](/docs/next/api/helpers/use-set-locale) hook，以及一个用于获取区域设置属性的函数。
它旨在方便你创建自己的区域设置选择器组件。

如果你不想自己实现，也可以直接使用 [`<LocaleSelector>`](/docs/next/api/components/locale-selector) 组件。

## 参考

### 返回值

一个对象，包含当前区域设置、locales 列表、[`useSetLocale`](/docs/next/api/helpers/use-set-locale) hook，以及一个用于获取区域设置属性的函数。

***

## 示例

### `<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
    );
  };

  // 如果未返回任何 locales，则不渲染任何内容或进行优雅降级处理
  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) 组件。
* 进一步了解 [`useLocale`](/docs/next/api/helpers/use-locale) Hook。