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


## Overview

The `useRegion` hook retrieves the user's currently selected region from the [`<GTProvider>` context](/docs/next/api/components/gtprovider).

<Callout>
    `useRegion` is a client-side hook and *can only be used in client-side components*.
    Ensure your app is wrapped in a [`<GTProvider>`](/docs/next/api/components/gtprovider).
</Callout>

For server-side usage, see [`getRegion`](/docs/next/api/helpers/get-region).

## Reference

### Returns

`string | undefined` — The currently active region code (e.g., `"US"`, `"CA"`), or `undefined` if no region has been set.

---

## Examples

### Basic usage

```jsx title="RegionDisplay.jsx" copy
'use client';
import { useRegion } from 'gt-next';

export default function RegionDisplay() {
  const region = useRegion(); // [!code highlight]
  return <p>Current region: {region ?? 'Not set'}</p>;
}
```

---

## Notes

- Returns `undefined` if the user has not selected a region.
- The region can be set using the [`<RegionSelector>`](/docs/next/api/components/region-selector) component or [`useRegionSelector`](/docs/next/api/helpers/use-region-selector) hook.

## Next steps

- See [`getRegion`](/docs/next/api/helpers/get-region) for the server-side equivalent.
- Use [`<RegionSelector>`](/docs/next/api/components/region-selector) to let users choose their region.
- Use [`useRegionSelector`](/docs/next/api/helpers/use-region-selector) to build a custom region selector.