RTL

How it work

The wrapper component RTL is wrap the react app content tree. Install stylis-plugin-rtl (opens in a new tab) and stylis (opens in a new tab) package.

RTL.jsx

_25
import { FC, useEffect } from "react";
_25
import createCache from "@emotion/cache";
_25
import { CacheProvider } from "@emotion/react";
_25
import { useTheme } from "@mui/material";
_25
import rtlPlugin from "stylis-plugin-rtl";
_25
import { prefixer } from "stylis";
_25
_25
const RTL = ({ children }) => {
_25
const theme = useTheme();
_25
_25
useEffect(() => {
_25
document.dir = theme.direction;
_25
}, [theme.direction]);
_25
_25
const cacheRTL = createCache({
_25
key: theme.direction === "rtl" ? "rtl" : "css",
_25
stylisPlugins: theme.direction === "rtl" ? [prefixer, rtlPlugin] : [],
_25
});
_25
_25
cacheRTL.compat = true;
_25
_25
return <CacheProvider value={cacheRTL}>{children}</CacheProvider>;
_25
};
_25
_25
export default RTL;

Usage

App.jsx

_10
const App = () => {
_10
return (
_10
<RTL>
_10
<Component />
_10
</RTL>
_10
);
_10
};
_10
_10
export default App;

How to remove RTL?

Reference

For NextJSInternationalization