function Example() { const [rtl, setRTL] = useRTL(); return ( <Checkbox checked={rtl} name="preview" onChange={({ checked }) => setRTL(checked)}> Enable RTL </Checkbox> ); }
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 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)}> 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 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">
() => [rtl: boolean, setRTL: (value: boolean) => {}]