c15t/docs/shared/react/hooks/use-text-direction.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Use Text Direction
description: Reference page for use text direction.
group: reference
---
`useTextDirection()` determines the correct text direction (`'ltr'` or `'rtl'`) based on the provided language and sets it on the document. It wraps the `@c15t/ui` text direction utilities as a React hook.

This is used internally by IAB components but is available for custom UI that needs to handle bidirectional text.

```tsx
import { useTextDirection } from '@c15t/react/hooks';

function CustomConsentUI({ language }: { language: string }) {
  const direction = useTextDirection(language);

  return (
    <div dir={direction}>
      {/* Content renders correctly for RTL languages like Arabic and Hebrew */}
    </div>
  );
}
```

## Parameters

|Parameter|Type|Default|Description|
|--|--|--|--|
|`language`|`string \|undefined`|—|BCP 47 language tag (e.g. `'en'`, `'ar'`, `'he'`)|

## Return Value

|Type|Description|
|--|--|
|`'ltr' \|'rtl'`|The text direction for the given language|

## RTL Languages

The hook recognizes standard RTL languages including Arabic (`ar`), Hebrew (`he`), Persian (`fa`), and Urdu (`ur`), among others.