Skip to main content

useRTL

useRTL is a direction hook for reading and switching the page's reading direction. It returns whether the page is right-to-left with a function to change it.

Import

import { useRTL } from '@vortexlabs/vortex';

Other links

Storybook

Features

  • Returns whether the page is right-to-left and a function to change it.
  • Keeps the dir attribute on <html> in sync, including changes made outside React.
  • Supports an initial direction through defaultRTL on VortexProvider.
  • Supports mirrored arrow keys and positions in Vortex components such as Tabs, Slider, and Drawer.

Current Direction

useRTL returns [rtl, setRTL]: rtl is true when the page is right-to-left, and setRTL changes it. It reads the direction from the VortexProvider at your app root; without one, rtl is always false and setRTL does nothing.

Alignment values like start and end flip with the direction on their own. Read rtl only when the content itself must change.

"use client";

import { ArrowLeft, ArrowRight } from "@vortexlabs/vortex-icons";
import { Button, useRTL } from "@vortexlabs/vortex";

export const NextButton = () => {
  const [rtl] = useRTL();

  return <Button endIcon={rtl ? ArrowLeft : ArrowRight}>Next</Button>;
};

Changing Direction

Call setRTL(true) for right-to-left or setRTL(false) for left-to-right. NextButton from the previous example flips its arrow with it. The change applies to the whole page, so this example switches back to the original direction when it unmounts.

Document direction: left-to-right
"use client";

import { useEffect, useRef } from "react";
import { Button, Stack, Text, useRTL } from "@vortexlabs/vortex";
import { NextButton } from "./NextButton";

export const DirectionControls = () => {
  const [rtl, setRTL] = useRTL();
  const initialRTL = useRef(rtl);

  useEffect(() => {
    return () => setRTL(initialRTL.current);
  }, [setRTL]);

  return (
    <Stack gap={3}>
      <Text>Document direction: {rtl ? "right-to-left" : "left-to-right"}</Text>
      <Stack direction="row" gap={2}>
        <Button variant="secondary" onClick={() => setRTL(!rtl)}>
          Toggle direction
        </Button>
        <NextButton />
      </Stack>
    </Stack>
  );
};

Initial Direction

Set defaultRTL on VortexProvider to start right-to-left. It defaults to false, is read only on the first render, and replaces any existing dir on <html>, so pass it even if your HTML already has dir="rtl".

Document Scope

useRTL reads and writes the dir attribute on <html>, so direction always applies to the whole page, even inside a nested or scoped VortexProvider.

To flip one section only, set dir on its element instead. useRTL still reports the page direction, and Vortex components inside that section, like Tabs and Slider, still follow it.

Accessibility

Description
Direction doesn't change the page language; set lang separately.
Use logical values such as start and end so layouts follow the reading direction.