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

title: useRegion
description: Read the active region with General Translation gt-react. API reference for useRegion.

---

The `useRegion` hook returns the user&#39;s currently selected region from the [`<GTProvider>`](/docs/react/reference/components/gt-provider) context, or `undefined` when none is set.

*Available in `gt-react`, `gt-next`, and `gt-react-native`. Examples import from `gt-react`; import from your framework&#39;s package instead.*

*Note: not exported by `gt-tanstack-start`.*

## Overview [#overview]

Call `useRegion` to read the active region code.

```tsx
import { useRegion } from 'gt-react';

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

*Note: In `gt-react`, call `useRegion` under a [`<GTProvider>`](/docs/react/reference/components/gt-provider). In `gt-next`, it also works in synchronous server components.*

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

The region is set via the [`<RegionSelector>`](/docs/react/reference/components/region-selector) component or the [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector) hook. When the user has not selected a region, the hook returns `undefined`.

## Returns [#returns]

**Type** `string | undefined`

The active region code, such as `US` or `CA`, or `undefined` when no region is set.

## Notes [#notes]

* In an async App Router component, use [`getRegion`](/docs/react/nextjs/reference/functions/get-region) instead.
* To change the region, use [`useSetRegion`](/docs/react/reference/hooks/use-set-region) or [`<RegionSelector>`](/docs/react/reference/components/region-selector).