useDirection

Detects or controls the current text direction (LTR or RTL), useful for localization and layout.

Usage

Basic usage example to quickly see how the useDirection works.

"use client";
import { useApp as useAppContext } from "@/config/app-context";
import { TextDirectionIcon } from "@/icons/*";
import { Button } from "@/ui/button";

export function UseDirectionDemo() {
  const { toggleDirection, dir } = useAppContext();
  return (
    <Button size="icon" variant="primitive" onClick={toggleDirection} className="m-auto">
      <TextDirectionIcon dir={dir} size="md" />
    </Button>
  );
}

API References

mdn

Props API

Props API	Type	Default	Annotation
initialDirection`?`	`"ltr" \| "rtl"`	`ltr`	Direction set as a default value
detectDirection`?`	`boolean`	`true`	Determines whether direction should be updated on mount based on `dir` attribute set on root element (usually html element)

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

use-direction.ts