# General Translation React SDKs (gt-react, gt-next): useLocaleSelector
URL: https://generaltranslation.com/en-GB/docs/react/reference/hooks/use-locale-selector.mdx
---

title: useLocaleSelector
description: Build a custom locale switcher with General Translation gt-react. API reference for useLocaleSelector.

---

The `useLocaleSelector` hook returns the state needed to build a custom locale switcher: the active locale, the available locales, a locale-properties helper, and a setter.

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`. Examples import from `gt-react`; import from your framework's package instead.*

## Overview [#overview]

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

```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 (which saves the choice and reloads the page), and `getLocaleProperties` to render display names. Pass a subset of locales to restrict the options.

## 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 make available. When omitted, the locales from the `<GTProvider>` context are used.

## 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. | `(locale: string) => LocaleProperties` |

## Notes [#notes]

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