# General Translation React SDKs (gt-react, gt-next, gt-react-native): useLocaleSelector
URL: https://generaltranslation.com/en-US/docs/react/reference/hooks/use-locale-selector.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Build a custom locale switcher. API reference for useLocaleSelector.

The `useLocaleSelector` hook exposes the pieces for a custom language switcher: the active locale, the available locales, a locale-properties helper, and a setter to change the locale.

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`.*

## Overview [#overview]

Call `useLocaleSelector` and wire its values into your own `<select>` or custom UI.

*Examples import from `gt-react`; import from your framework's package instead.*

```tsx
'use client';
import { useLocaleSelector } from 'gt-react';

export default function MySelector() {
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {locales.map((l) => (
        <option key={l} value={l}>
          {getLocaleProperties(l).nativeNameWithRegionCode}
        </option>
      ))}
    </select>
  );
}
```

*Note: `useLocaleSelector` is client-side only. If you do not need a custom UI, use the [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) component instead.*

## How it works [#how-it-works]

The hook exposes everything a selector needs: the active `locale`, the list of `locales`, `setLocale` to change it, and `getLocaleProperties` to render display names. Pass a subset of locales to restrict the options. Locale-change behavior depends on the framework; see [Managing locales](/docs/react/guides/managing-locales#persistence).

## Parameters [#parameters]

| Parameter | Description | Type | Optional | Default |
| --- | --- | --- | --- | --- |
| [`locales`](#locales) | Subset of locales to offer. | `string[]` | Yes | All supported |

### `locales` [#locales]

**Type** `string[]` · **Optional** · **Default** All supported

A subset of the supported locales to offer. The hook preserves the order of an explicitly supplied array. When omitted, it sorts the locales from the [`<GTProvider>`](/docs/react/reference/components/gt-provider) context by native display name.

## Returns [#returns]

**Type** `object`

| Field | Description | Type |
| --- | --- | --- |
| `locale` | The currently selected locale. | `string` |
| `locales` | The available locales. | `string[]` |
| `setLocale` | Change the active locale. | `(locale: string) => void` |
| `getLocaleProperties` | Get display metadata for a locale using the configured custom mapping. | `(locale: string) => LocaleProperties` |

## Notes [#notes]

- `useLocaleSelector` is client-side only.
- For a ready-made dropdown, use [`<LocaleSelector>`](/docs/react/reference/components/locale-selector).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.