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-utils

Usage

Direction Detection

import { detectDirection, isRtl, isMixed } from "react-rtl-utils";

detectDirection("שלום עולם"); // "rtl"
detectDirection("Hello World"); // "ltr"
isRtl("مرحبا"); // true
isMixed("hello שלום"); // true

Hooks

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

---

_{README built with README Builder}

License

MIT © Ofer Shapira