react-rtl-utils
v1.0.1
Published
React utilities for RTL layouts — hooks and components for bidirectional text, RTL-aware positioning, and direction detection
Maintainers
ofershapReadme
react-rtl-utils — React Hooks & Components for RTL and Bidirectional Text
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.
Install
npm install react-rtl-utilsUsage
Direction Detection
import { detectDirection, isRtl, isMixed } from "react-rtl-utils";
detectDirection("שלום עולם"); // "rtl"
detectDirection("Hello World"); // "ltr"
isRtl("مرحبا"); // true
isMixed("hello שלום"); // trueHooks
import {
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
}Components
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>}
/>CSS Utilities
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" },
);API
Detection
| 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 |
Hooks
| Hook | Description |
| ------------------------ | --------------------------------------- |
| useDirection(initial?) | Stateful direction with toggle |
| useTextDirection(text) | Auto-detect direction from text |
| useDocumentDirection() | Track <html dir> attribute reactively |
Components
| 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 |
CSS Utilities
| 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 |
Supported RTL Scripts
Hebrew, Arabic, Syriac, Thaana, Mandaic, Arabic Extended, Arabic Presentation Forms
Author
Ofer Shapira
