useTextDirection

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.

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.

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

function BiDirectionalBanner() {
  const { translationConfig } = useConsentManager();
  const dir = useTextDirection(translationConfig.defaultLanguage);

  return <div dir={dir}>...</div>;
}