# General Translation React SDKs (gt-react, gt-next, gt-react-native): useLocaleDirection
URL: https://generaltranslation.com/zh/docs/react/reference/hooks/use-locale-direction.mdx
---
title: useLocaleDirection
description: 读取区域设置的文本方向。useLocaleDirection 的 API 参考。

---

`useLocaleDirection` 钩子会告诉你某个区域设置的书写方向是从左到右 (`'ltr'`) 还是从右到左 (`'rtl'`) ；如果你未传入区域设置，则默认使用当前区域设置。

*可用于 `gt-react`、`gt-next` 和 `gt-react-native`。示例从 `gt-react` 导入；请改为从你的框架对应的包导入。*

*注意：`gt-tanstack-start` 不导出此钩子。*

## 概览 [#overview]

调用 `useLocaleDirection` 获取文本方向，并将其设置到 `dir` 属性上。

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

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

*注意：在 `gt-react` 中，请在 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 内调用 `useLocaleDirection`。在 `gt-next` 中，它也可在同步服务器组件中使用。*

## 工作方式 [#how-it-works]

不传参数调用时，该钩子会返回当前区域设置的文本方向。传入区域设置代码可获取特定区域设置的文本方向。它适用于设置 `dir` 属性，以支持从右到左书写的语言。

## 参数 [#parameters]

| 参数                  | 描述        | 类型       | 可选 | 默认值    |
| ------------------- | --------- | -------- | -- | ------ |
| [`locale`](#locale) | 要检查的区域设置。 | `string` | 是  | 当前区域设置 |

### `locale` [#locale]

**类型** `string` · **可选** · **默认值** 当前区域设置

一个 BCP 47 区域设置代码，例如 `ar` 或 `en-US`。如果省略，则使用上下文中的当前区域设置。

## 返回值 [#returns]

**类型** `'ltr' | 'rtl'`

此区域设置的文本方向。

## 示例 [#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]

* 在异步 App Router 组件中，请改用 [`getLocaleDirection`](/docs/react/nextjs/reference/functions/get-locale-direction)。
* 可用于为元素设置 `dir` 属性，以支持 RTL。