Custom hook to control the direction of the content flow.
Supports server-side rendering
Doesn't require page refresh


import { useRTL } from "@uicapsule/components";

Browsers display text using the left-to-right (LTR) direction by default. However, some languages, like Arabic or Hebrew, use right-to-left direction (RTL). 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)}>
<MenuItem roundedCorners onClick={() => setRTL(true)}>

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

<UIC 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">

Arguments and return value

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