DirectionProvider

Domain

Context provider that sets dir="rtl"/"ltr" on a wrapper div based on the active language. useDirection() hook exposes lang, dir, isRTL.

Preview

dir="rtl"

مرحبا بالعالم — Hello World

Text flows right to left

Code

<DirectionProvider lang="ar">
  <p className="text-right">مرحبا بالعالم — Hello World</p>
</DirectionProvider>

Preview

dir="ltr"

Hello World — مرحبا بالعالم

Text flows left to right

Code

<DirectionProvider lang="en">
  <p>Hello World — مرحبا بالعالم</p>
</DirectionProvider>

Navigation