# General Translation React SDKs (gt-react, gt-next, gt-react-native): useRegion
URL: https://generaltranslation.com/en-US/docs/react/reference/hooks/use-region.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Read the active region. API reference for useRegion.

The `useRegion` hook returns the user'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`.*

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

## Overview [#overview]

Call `useRegion` to read the active region code.

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

```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 through 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).

## Sitemap

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