RTL

By adding an RTL layout, we have made the project more accessible and welcoming to consumers from all linguistic backgrounds.

Define the default direction

To enable the RTL layout, simply set the dir property to rtl in app.config.js. This setting will be saved in localStorage with the key name dir.

Writing RTL compatible SCSS

CSS logical attributes determine the layout and style of a webpage based on directional values. This allows us to construct more flexible and maintainable layouts, particularly for websites that support many languages and writing directions.

For example, rather than using physical attributes like margin-left and margin-right, you may use logical properties like margin-inline-start and margin-inline-end to position elements depending on text direction.

Mutating direction and locale at runtime

We've created a changeDiraction in src/store/localeSlice, allowing you to change the value dynamically.

Here's how to get/change the direction:

// Redux Imports
import { useDispatch, useSelector } from "react-redux";

// Actions
import { changeDir } from "@/store/localeSlice.js";

// Custom Components Imports
import EBtn from "@components/Elements/EBtn";

export const DirToggler = () => {
    const dispatch = useDispatch();
    
    // This is how you get the current direction value
    const { dir } = useSelector((state) => state.localeSlice);
    
    const toggleDir = () => {
        // @possible-values: ltr, rtl
        if(dir === 'rtl') dispatch(changeDir("ltr"))
        else dispatch(changeDir("rtl"))
    }

    return (
        <EBtn onClick={toggleDir}>
            Toggle direction
        </EBtn>
    );
};

Here's how to get/change the locale:

// Redux Imports
import { useDispatch, useSelector } from "react-redux";

// Actions
import { changeLocale } from "@/store/localeSlice.js";

// Custom Components Imports
import EBtn from "@components/Elements/EBtn";

const localeToggler = () => {
    // Hooks
    const dispatch = useDispatch();
    
    // This is how you get the current locale value
    const { locale } = useSelector((state) => state.localeSlice);

    const changeLocale = () => {
        // @possible-values: Pick any language you've included in the locale store .
        dispatch(changeLocale('ar'));
    };

    return (
        <EBtn onClick={changeLocale}>
            Change to Arabic
        </EBtn>
    );
};

export default localeDirToggler;

Related Pages

• Localization

Note

We auto store the direction in local storage with the rtl key name to preserve your browsing history during reloads.