# gt-next: General Translation Next.js SDK: useLocaleSelector
URL: https://generaltranslation.com/en-US/docs/next/api/helpers/use-locale-selector.mdx
---
title: useLocaleSelector
description: API reference for the useLocaleSelector hook
---
{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

This hook returns the current locale, the list of locales, the [`useSetLocale`](/docs/next/api/helpers/use-set-locale) hook, and a function to retrieve locale properties.
This is meant for easy use when creating your own locale selector component.

If you don't want to implement your own, you can use the [`<LocaleSelector>`](/docs/next/api/components/locale-selector) component instead.

## Reference

### Returns

An object containing the current locale, the list of locales, the [`useSetLocale`](/docs/next/api/helpers/use-set-locale) hook, and a function to retrieve locale properties.

---

## Examples

### `<LocaleSelector>`

This is the example implementation of the [`<LocaleSelector>`](/docs/next/api/components/locale-selector) component.

```jsx
export default function LocaleSelector({
  locales: _locales,
  ...props
}: {
  locales?: string[];
  [key: string]: any;
}): React.JSX.Element | null {
  // Get locale selector properties
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
    _locales ? _locales : undefined
  );

  // Get display name
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // If no locales are returned, just render nothing or handle gracefully
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <select
      {...props}
      // Fallback to an empty string if currentLocale is undefined
      value={locale || ''}
      onChange={(e) => setLocale(e.target.value)}
    >
      {/* Optional fallback for when no locale is set */}
      {!locale && <option value='' />}

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

---

## Notes

- This hook is client-side only.
- Learn more about locale codes [here](/docs/core/locales).

## Next steps

- Learn more about the [`<LocaleSelector>`](/docs/next/api/components/locale-selector) component.
- Learn more about the [`useLocale`](/docs/next/api/helpers/use-locale) hook.