Wensity

Direction

LTR and RTL direction context for layout and composition, driving reading order from the active locale automatically.

directionltrrtllayouti18nlocalearabichebrewbidi
Loading preview

Examples

Practical examples and common states for the same installable component.

RTL

Explicit right-to-left direction for RTL languages.

examples/direction-rtl.tsx
"use client";


import { Direction } from "@/components/wensity/direction";


export function RTLDemo() {
  return (
    <Direction direction="rtl">
      <div>
        <p>محتويات باللغة العربية</p>
        <button>إرسال</button>
      </div>
    </Direction>
  );
}

Dynamic

Auto-detects direction from a language tag.

examples/direction-dynamic.tsx
"use client";


import { Direction } from "@/components/wensity/direction";


export function DynamicDemo({ lang }: { lang: string }) {
  return (
    <Direction dynamic lang={lang}>
      <div>
        <p>
          {lang === "ar"
            ? "مرحباً بالعالم"
            : "Hello, world!"}
        </p>
      </div>
    </Direction>
  );
}

Side-by-side

LTR vs RTL comparison of the same component.

examples/direction-comparison.tsx
"use client";


import { Direction } from "@/components/wensity/direction";


export function ComparisonDemo() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <Direction direction="ltr">
        <div>Left-to-right content</div>
      </Direction>
      <Direction direction="rtl">
        <div>Right-to-left content</div>
      </Direction>
    </div>
  );
}

Props

PropTypeDefaultDescription
direction"ltr" | "rtl"-Explicit text direction for the subtree.
dynamicbooleanfalseDerives the direction from lang instead of setting it explicitly.
langstring-BCP 47 language tag used with dynamic, such as en, ar, or he.
asChildbooleanfalseMerges onto the child element instead of wrapping it in a div.