useRTL

A custom hook to control the direction of the content.


function Example() {
  const [rtl, setRTL] = useRTL();

  return (
    <Checkbox checked={rtl} name="preview" onChange={({ checked }) => setRTL(checked)}>
      Enable RTL
    </Checkbox>
  );
}

Usage

import { useRTL } from "reshaped";

Browsers display text using the left-to-right (LTR) direction by default. However, some languages, like Arabic or Hebrew, use right-to-left (RTL) direction. This means that the text direction should change along with the CSS properties like margin-left, padding-left, etc.

useRTL helps you detect which direction is currently used and switch between them.


function Component() {
  const [rtl, setRTL] = useRTL();

  return (
    <View gap={3}>
      Is RTL on? {rtl}
      <MenuItem roundedCorners onClick={() => setRTL(false)}>
        English
      </MenuItem>
      <MenuItem roundedCorners onClick={() => setRTL(true)}>
        Hebrew
      </MenuItem>
    </View>
  );
}

Content direction is a value applicable to the whole application, so its default value can be set using the Reshaped provider.

<Reshaped defaultRTL={true} />

To support the default RTL value with server-side rendering, pass the value to the dir attribute to the body element.

<body dir="rtl">

Reshaped Provider

Related utility

Installation - SSR

() => [rtl: boolean, setRTL: (value: boolean) => {}]

useResponsiveClientValue

useScrollLock

useRTL

Usage

Arguments and return value