# General Translation React SDKs (gt-react, gt-next): useLocaleDirection
URL: https://generaltranslation.com/ja/docs/react/reference/hooks/use-locale-direction.mdx
---

title: useLocaleDirection
description: General Translation の gt-react でロケールのテキストの書字方向を取得します。useLocaleDirection の API リファレンス。

---

`useLocaleDirection` フックは、現在のロケール、または指定したロケールのテキストの書字方向 (`'ltr'` または `'rtl'`) を返します。

*`gt-react`、`gt-next`、`gt-react-native` で利用できます。例では `gt-react` からインポートしていますが、実際には使用しているフレームワークのパッケージからインポートしてください。*

*注: `gt-tanstack-start` からはエクスポートされません。*

## 概要 [#overview]

`useLocaleDirection` を呼び出して direction を取得し、`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` · **任意** · **デフォルト** アクティブなロケール

`ar` や `en-US` などの BCP 47 ロケールコードです。省略した場合は、コンテキストのアクティブなロケールが使用されます。

## 戻り値 [#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) を使用してください。
* RTL 対応で要素の `dir` 属性を設定する際に便利です。