Hooks

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

ParameterTypeDefaultDescription
languagestring | undefined—BCP 47 language tag (e.g. 'en', 'ar', 'he')

Return Value

TypeDescription
'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>;
}