React hooks and components for RTL layouts — auto-detect text direction, flip styles, and handle bidirectional content for Hebrew, Arabic, and Persian apps. Zero dependencies.
import { useTextDirection, BidiText } from "react-rtl-utils";
const dir = useTextDirection("שלום עולם"); // "rtl"
<BidiText>שלום עולם</BidiText> // auto dir="rtl"
<BidiText>Hello World</BidiText> // auto dir="ltr"For Hebrew, Arabic, Persian, and Urdu apps. Zero dependencies.
npm install react-rtl-utilsimport { detectDirection, isRtl, isMixed } from "react-rtl-utils";
detectDirection("שלום עולם"); // "rtl"
detectDirection("Hello World"); // "ltr"
isRtl("مرحبا"); // true
isMixed("hello שלום"); // trueimport {
useDirection,
useTextDirection,
useDocumentDirection,
} from "react-rtl-utils";
function App() {
const { direction, toggleDirection } = useDirection("ltr");
return (
<div dir={direction}>
<button onClick={toggleDirection}>Toggle Direction</button>
</div>
);
}
function TextInput({ value }: { value: string }) {
const dir = useTextDirection(value);
return <input dir={dir} value={value} />;
}
function Layout() {
const dir = useDocumentDirection();
// Reactively tracks <html dir="..."> changes
}import { BidiText, DirectionProvider, RtlFlip } from "react-rtl-utils";
// Auto-detects direction per text content
<BidiText>שלום עולם</BidiText>
<BidiText>Hello World</BidiText>
// Wraps children with dir attribute
<DirectionProvider direction="rtl">
<YourApp />
</DirectionProvider>
// Conditionally render based on direction
<RtlFlip
direction={dir}
rtl={<span>→</span>}
ltr={<span>←</span>}
/>import { logicalValue, flipProperty, rtlStyle } from "react-rtl-utils";
logicalValue("rtl", "left", "right"); // "right"
flipProperty("rtl", "marginLeft"); // "marginRight"
const style = rtlStyle(
"rtl",
{ marginLeft: 10, textAlign: "left" },
{ marginLeft: 0, marginRight: 10, textAlign: "right" },
);| Function | Description |
|---|---|
detectDirection(text) |
Returns "rtl" or "ltr" based on character majority |
isRtl(text) |
Check if text is RTL |
isLtr(text) |
Check if text is LTR |
hasRtlChars(text) |
Check if text contains any RTL characters |
hasLtrChars(text) |
Check if text contains any LTR characters |
isMixed(text) |
Check if text contains both RTL and LTR characters |
| Hook | Description |
|---|---|
useDirection(initial?) |
Stateful direction with toggle |
useTextDirection(text) |
Auto-detect direction from text |
useDocumentDirection() |
Track <html dir> attribute reactively |
| Component | Description |
|---|---|
<BidiText> |
Auto-sets dir attribute based on text content |
<DirectionProvider> |
Wraps children with dir attribute |
<RtlFlip> |
Renders different content for RTL vs LTR |
| Function | Description |
|---|---|
logicalValue(dir, start, end) |
Pick value based on direction |
flipProperty(dir, prop) |
Flip CSS property name for RTL |
rtlStyle(dir, base, overrides?) |
Merge RTL style overrides |
Hebrew, Arabic, Syriac, Thaana, Mandaic, Arabic Extended, Arabic Presentation Forms