Skip to main content

useRTL

useRTL is a hook that reads and changes the page’s direction between left-to-right and right-to-left.

Import

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

Other links

Storybook
"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>;
};

Features

  • Reads and changes the page direction.
  • Tracks changes to the document’s dir attribute.
  • Shares direction through VortexProvider.

useRTL() returns [rtl, setRTL]: rtl is true for right-to-left, and setRTL changes the whole page’s direction. Use it inside VortexProvider; without a provider, it returns false and a setter that does nothing.

Changing Direction

Call setRTL(true) for right-to-left or setRTL(false) for left-to-right. This demo restores the original page direction on unmount.

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

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

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

  React.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={true} on VortexProvider to start right-to-left. The default is false; later prop changes have no effect.

The provider replaces <html dir> on mount, so pass defaultRTL even when your HTML already has dir="rtl".

Document Scope

The hook always uses <html dir>, including inside nested or scoped providers. A section’s own dir affects its layout, not this hook’s value.

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.