Implementing Dynamic RTL and LTR Layouts in a React Application Using Context and Local Storage

2 min readOct 31, 2023

To change the layout direction we will using the “ dir “ attribute of the root HTML element while storing the user’s preference in local storage

In your index.html file in the public directory, create a new id:

<html id="root-html">

  //remaining code

Setup the react context :

create a context and store it in the local storage


import React, { createContext, useContext, useState, useEffect } from "react";

const LayoutDirectionContext = createContext();

export const useLayoutDirection = () => {
  return useContext(LayoutDirectionContext);
};

export const LayoutDirectionProvider = ({ children }) => {
  const [isRTL, setIsRTL] = useState(() => {
    const storedIsRTL = localStorage.getItem("isRTL");
    return storedIsRTL === "true";
  });

  const toggleLayoutDirection = (boolean) => {
    setIsRTL(boolean);
  };

  useEffect(() => {
    localStorage.setItem("isRTL", isRTL.toString());
  }, [isRTL]);

  useEffect(() => {
    // After the language direction changes, update the root HTML element
    const rootHtml = document.getElementById("root-html");
    if (rootHtml) {
      rootHtml.setAttribute("dir", isRTL ? "rtl" : "ltr");
    }
  }, [isRTL]);

  return (
    <LayoutDirectionContext.Provider value={{ isRTL, toggleLayoutDirection }}>
      {children}
    </LayoutDirectionContext.Provider>
  );
};

In your react index file (eg: index.jsx) Add the provider :

Import the LayoutDirectionProvider from the context file we have created and wrap the App component using the layout provider.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { LayoutDirectionProvider } from "./LayoutDirectionContext";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <LayoutDirectionProvider>
      <App />
    </LayoutDirectionProvider>
  </React.StrictMode>
);

reportWebVitals();

Then use the context in your components:

In any component where you want to toggle the layout direction, use the context you’ve defined.


import React from 'react';
import { useLayoutDirection} from './LayoutDirectionContext';

function ExampleComponent() {
  const { isRtl, toggleLayoutDirection} = useLayoutDirection();

  return (
    <div>
      <button onClick={() => {toggleLayoutDirection(!isRTL);}}>Toggle Layout</button>
      <div >
        {isRtl ? 'right content ' : 'left content '}
      </div>
    </div>
  );
}

Adjust the style according to the direction.When you click the “Toggle Layout” button in your application, it will change the dir attribute of the root HTML element and switch between RTL and LTR layouts. The user's preference will also be stored in local storage for persistence. The dir attribute is set on the root HTML element to affect the entire application.

In conclusion, implementing dynamic Right-to-Left (RTL) and Left-to-Right (LTR) layouts in a React application using Context and Local Storage is a powerful and flexible way to cater to diverse user needs and preferences. By utilizing React Context, you can efficiently manage the layout direction state throughout your application, ensuring a seamless and responsive user experience. By following the practices outlined in this guide, you can offer a more inclusive, user-centric experience and pave the way for further enhancements and personalization in your React application.

Implementing Dynamic RTL and LTR Layouts in a React Application Using Context and Local Storage

Written by Balankdharan