@alef-prime/rtl-aware
v0.1.0-alpha.0
Published
Tiny helpers to make Hebrew/Arabic-first apps render with the right direction without sprinkling dir={isHE? 'rtl':'ltr'} everywhere. Hook + util + class flip — zero deps.
Maintainers
n50Readme
@alef-prime/rtl-aware
Stop sprinkling
dir={isHE ? "rtl" : "ltr"}everywhere.
Zero-dep helpers for Hebrew/Arabic/Persian/Urdu-first apps. Detect RTL, set document direction, flip Tailwind directional classes — six functions, ~60 lines of source, no React dependency (but works great with it).
import { isRTL, dirFor, applyDocDir, flipClasses, rtlCx } from "@alef-prime/rtl-aware";
isRTL("he"); // → true
isRTL("ar-SA"); // → true
isRTL("ru"); // → false
dirFor("he"); // → "rtl"
// Set <html lang> + <html dir> on the client, returns a cleanup fn:
const restore = applyDocDir("he");
// ... later
restore();
// Flip a Tailwind class string from LTR to RTL semantics:
flipClasses("pl-4 mr-2 text-left rounded-l-md", "he");
// → "pr-4 ml-2 text-right rounded-r-md"
// cx-style joiner that also flips for RTL:
rtlCx("he", "p-4", isFocused && "ml-2 border-l-2", "bg-white");
// → "p-4 mr-2 border-r-2 bg-white"What it handles
Symmetry flips for the directional Tailwind utilities most apps actually use:
ml-*↔mr-*,pl-*↔pr-*left-*↔right-*text-left↔text-rightrounded-l-*↔rounded-r-*border-l-*↔border-r-*
For everything else, use Tailwind's logical properties (ms-*, me-*, ps-*, pe-*, start-*, end-*) — they're better and Tailwind already handles them based on dir. This package fills the gap when you can't easily migrate.
What it does NOT do
- It does NOT replace
@tailwindcss/rtlor Tailwind's built-in logical-property support. Use those if you can. - It does NOT auto-detect lang from browser/navigator. You pass the lang in. Combine with
@alef-prime/i18n-pickfor that.
Status: alpha · 0.1.0
Born from ALEF-PRIME's Hebrew Control Gateway. Sibling of @alef-prime/i18n-pick, @alef-prime/units, @alef-prime/penalty-ledger, @alef-prime/deploy-verify. MIT.