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
import { FC, useEffect } from "react";
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { useTheme } from "@mui/material";
import rtlPlugin from "stylis-plugin-rtl";
import { prefixer } from "stylis";

const RTL = ({ children }) => {
const theme = useTheme();

useEffect(() => {
document.dir = theme.direction;
}, [theme.direction]);

const cacheRTL = createCache({
key: theme.direction === "rtl" ? "rtl" : "css",
stylisPlugins: theme.direction === "rtl" ? [prefixer, rtlPlugin] : [],
});

cacheRTL.compat = true;

return <CacheProvider value={cacheRTL}>{children}</CacheProvider>;
};

export default RTL;

Usage

App.jsx
const App = () => {
return (
<RTL>
<Component />
</RTL>
);
};

export default App;

How to remove RTL?

Reference

Last updated on
For NextJSInternationalization