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

The `useLocaleDirection` hook tells you whether a locale is written left-to-right (`'ltr'`) or right-to-left (`'rtl'`), defaulting to the active locale when you do not pass one.

*Available in `gt-react`, `gt-next`, and `gt-react-native`.*

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

## Overview [#overview]

Call `useLocaleDirection` to get the direction, and apply it with the `dir` attribute.

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

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

export default function DirectionWrapper({ children }) {
  const dir = useLocaleDirection(); // [!code highlight]
  return <div dir={dir}>{children}</div>;
}
```

*Note: In `gt-react`, call `useLocaleDirection` 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]

When called with no argument, the hook returns the direction of the active locale. Pass a locale code to get the direction of a specific locale. It is useful for setting the `dir` attribute to support right-to-left languages.

## Parameters [#parameters]

| Parameter | Description | Type | Optional | Default |
| --- | --- | --- | --- | --- |
| [`locale`](#locale) | The locale to check. | `string` | Yes | Active locale |

### `locale` [#locale]

**Type** `string` · **Optional** · **Default** Active locale

A BCP 47 locale code, such as `ar` or `en-US`. When omitted, the active locale from context is used.

## Returns [#returns]

**Type** `'ltr' | 'rtl'`

The text direction for the locale.

## Examples [#examples]

```tsx title="SpecificDirection.tsx"
import { useLocaleDirection } from 'gt-react';

export default function SpecificDirection() {
  const dir = useLocaleDirection('ar'); // 'rtl' [!code highlight]
  return <p>Arabic text direction: {dir}</p>;
}
```

## Notes [#notes]

- In an async App Router component, use [`getLocaleDirection`](/docs/react/nextjs/reference/functions/get-locale-direction) instead.
- Useful for setting the `dir` attribute on elements for RTL support.

## Sitemap

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